Vue 3의 반응성 시스템은 내부적으로 어떻게 동작하나요?

Question

Accepted Answer

Vue 3의 반응성은 JavaScript **Proxy**를 기반으로 합니다. 상태를 반응형으로 만들면, Vue는 이를 Proxy로 감싸 **읽기와 쓰기를 가로채고**, 어떤 effect가 어떤 속성에 의존하는지 **추적(track)**하며, 데이터가 변경되면 그 effect들이 다시 실행되도록 **트리거(trigger)**합니다.

## 핵심 메커니즘: 읽을 때 track, 쓸 때 trigger

```js
// reactive()의 단순화된 멘탈 모델
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // "현재 effect가 obj.key에 의존함"을 기록
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // obj.key에 의존하던 모든 effect를 다시 실행
      return true;
    },
  });
}
```

속성을 읽으면 현재 실행 중인 effect를 의존성으로 **track**하고, 속성에 쓰면 그것을 읽은 모든 effect를 **trigger**합니다. 이것이 특정 속성이 변경될 때 어떤 컴포넌트 렌더링이나 computed를 업데이트해야 하는지 Vue가 *정확히* 아는 방법입니다.

## effect가 모든 것을 묶습니다

```js
// 컴포넌트 렌더링, computed, watcher는 모두 "effect" 내부에서 실행됨
effect(() => {
  document.body.innerHTML = count.value; // count.value를 읽으면 이 effect를 track
});
count.value++; // effect를 trigger → 다시 실행 → DOM 업데이트
```

effect가 실행될 때 Vue는 그것을 "활성(active)"으로 표시하므로, 실행 중 일어나는 모든 반응형 읽기가 그것과 연결됩니다. 이후 의존성이 변경되면 영향받는 effect만 다시 실행됩니다.

## Proxy(Vue 3)가 Object.defineProperty(Vue 2)보다 나은 이유

```js
// Vue 2는 속성별로 Object.defineProperty를 사용했는데, 다음을 감지할 수 없었음:
this.obj.newProp = 1;   // ❌ 새 속성 추가 (Vue.set 필요)
this.arr[0] = 5;         // ❌ 인덱스 할당
this.arr.length = 0;     // ❌ length 변경

// Vue 3의 Proxy는 새 키, 삭제, 배열을 포함한 모든 연산을 가로챔 ✅
```

Proxy는 *객체 전체*를 가로채(모든 키, 추가, 삭제, 배열 변경), Vue 2의 잘 알려진 한계를 제거합니다 — 더 이상 `Vue.set` 우회가 필요 없습니다.

## ref vs reactive 내부적으로

```text
reactive(obj) → 객체의 Proxy를 반환
ref(value)    → .value 접근이 track되는 { value } 객체를 반환
                (Proxy는 객체만 감싸므로 원시 값도 반응형이 될 수 있음)
```

## 왜 중요한가

track/trigger Proxy 모델을 이해하면 Vue가 *왜* 그토록 효율적인지(변경된 데이터에 실제로 의존하는 effect만 업데이트 — 세밀한 반응성), 그리고 옛 Vue 2의 한계가 *왜* 존재했고 Vue 3에서 사라졌는지를 설명할 수 있습니다.

또한 실용적인 규칙도 명확해집니다: 왜 `reactive`는 객체가 필요한지(Proxy는 원시 값을 감쌀 수 없어 `ref`가 필요), 그리고 왜 `reactive`를 구조 분해하면 추적이 깨지는지(값을 Proxy의 get/set 가로채기에서 분리하기 때문).