Vue Academy · 강의

고급 반응성: shallowRef와 triggerRef

성능을 위한 shallowRef, 반응성에서 제외하는 markRaw와 수동 트리거를 위한 triggerRef를 익힙니다.

레슨 1/413개 단계

고급 반응성: shallowRef와 triggerRef은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

ref와 reactive를 넘어선 반응성 제어

뷰의 심층 반응성은 편리하지만 항상 원하는 방식은 아닙니다. 큰 객체나 외부 인스턴스에서는 깊이 추적하는 일이 낭비가 될 수 있습니다. 뷰는 세밀하게 제어할 수 있도록 shallowRef, triggerRef, markRaw를 제공합니다.

ref가 심층적으로 추적하는 방식

객체를 담은 일반 ref는 객체 전체를 깊이 반응형으로 만듭니다. 중첩된 속성을 하나라도 변경하면 업데이트가 발생합니다. 작은 상태에는 좋지만 큰 구조에서는 비용이 큽니다.

import { ref } from "vue"

const user = ref({ name: "Ada", prefs: { theme: "dark" } })
user.value.prefs.theme = "light" // triggers update (deep)

shallowRef: 값만 반응형

shallowRef는 .value의 재할당을 추적하지만, 보관된 값 내부의 변경은 추적하지 않습니다. 내부 변경으로는 렌더링이 발생하지 않습니다.

import { shallowRef } from "vue"

const state = shallowRef({ count: 0 })
state.value.count++        // does NOT trigger update
state.value = { count: 1 } // DOES trigger (new .value)

shallowRef 사용 시점

전체를 한 번에 교체하는 크고 사실상 불변인 데이터에 사용하거나, 외부 객체(차트 인스턴스나 대규모 데이터 집합)를 감쌀 때 사용하십시오. 이런 경우 깊이 추적해도 이점 없이 오버헤드만 추가됩니다.

const chart = shallowRef(null)
// chart.value = new Chart(...) replaces wholesale

중첩된 상태 변경 문제

때로는 (성능을 위해) shallowRef 내부의 값을 DO 변경하면서도 제어된 시점에 다시 렌더링해야 할 때가 있습니다. Vue는 이 변경을 감지하지 못하므로 UI가 오래된 상태로 남습니다.

const list = shallowRef([1, 2, 3])
list.value.push(4) // mutated, but no update fires

triggerRef: 업데이트 강제하기

triggerRef는 내부 내용을 변경한 후 얕은 참조에 의존하는 반응성 효과를 수동으로 강제 실행합니다. 여러 변경을 묶어서 처리한 다음 한 번만 트리거합니다.

import { shallowRef, triggerRef } from "vue"

const list = shallowRef([1, 2, 3])
list.value.push(4)
list.value.push(5)
triggerRef(list) // now the UI updates

성능 패턴

패턴은 다음과 같습니다. 큰 구조를 shallowRef에 보관하고 변경마다 발생하는 반응성 비용 없이 자유롭게 변경한 다음, 일괄 변경 내용을 화면에 반영하고 싶을 때 triggerRef를 한 번 호출합니다.

function bulkUpdate(rows) {
  for (const r of rows) data.value.push(r) // cheap
  triggerRef(data)                         // one update
}

markRaw: 완전히 제외하기

markRaw는 객체에 표시를 남겨 Vue가 절대로 반응형으로 만들지 않도록 합니다. reactive나 일반 참조 내부에 있더라도 마찬가지입니다. 프록시로 감싸면 안 되는 타사 클래스 인스턴스에 사용하십시오.

import { markRaw, reactive } from "vue"

const state = reactive({
  map: markRaw(new ThirdPartyMap()),
})
// state.map is the raw instance, never a proxy

markRaw가 중요한 이유

복잡한 클래스 인스턴스(맵, 편집기, 웹소켓)를 반응형 프록시로 감싸면 내부 참조가 끊어지거나 미묘한 버그가 발생할 수 있습니다. markRaw는 이러한 객체를 변경하지 않은 채 반응형 state 안에 보관하도록 합니다.

도구 결합하기

이 도구들은 함께 사용할 수 있습니다. markRaw 인스턴스를 담은 shallowRef를 사용하면 반응형으로 교체할 수 있는 슬롯과 Vue가 절대로 프록시로 감싸지 않는 내부 객체를 함께 얻을 수 있어 외부 통합에 적합합니다.

const editor = shallowRef(null)
function init(el) {
  editor.value = markRaw(new CodeEditor(el))
}

반응성 비용과 제어

상충 관계가 있습니다. 깊은 반응성은 손쉽지만 더 무겁고, 얕은 API는 직접 업데이트를 트리거해야 하는 대신 제어력과 성능을 제공합니다. 프로파일링을 통해 필요성이 확인될 때만 사용하십시오.

빠른 확인

고급 반응성에 대한 이해도를 확인해 보십시오.

인터랙티브 레슨에서 답해보세요

복습

고급 반응성 제어를 배웠습니다.

shallowRef는 내부 변경이 아니라 .value 재할당에만 반응하므로, 크기가 큰 데이터나 외부 데이터에 적합합니다.
triggerRef는 얕은 참조의 내용을 변경한 후 업데이트를 수동으로 강제합니다(변경을 묶은 다음 한 번만 트리거합니다).
markRaw는 객체를 반응성에서 영구적으로 제외하므로 타사 클래스 인스턴스에 적합합니다.
이 기능들은 직접 업데이트를 트리거해야 하는 대신 성능과 제어력을 제공합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“고급 반응성: shallowRef와 triggerRef” 강의는 무료인가요?

네 — “고급 반응성: shallowRef와 triggerRef” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“고급 반응성: shallowRef와 triggerRef”에서 뭘 배우나요?

성능을 위한 shallowRef, 반응성에서 제외하는 markRaw와 수동 트리거를 위한 triggerRef를 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“고급 반응성: shallowRef와 triggerRef” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기