반응형 시스템 내부

1. Proxy의 get 트랩 → 의존성 추적 (track)
2. Proxy의 set 트랩 → 효과 실행 (trigger)
3. effect — 반응형 데이터를 사용하는 함수 (컴포넌트 렌더, computed, watch 등)

// 의존성을 저장하는 WeakMap
// targetMap: WeakMap<object, Map<string, Set<Function>>>
const targetMap = new WeakMap()
let activeEffect: Function | null = null

// 의존성 추적 — get 트랩에서 호출
function track(target: object, key: string) {
  if (!activeEffect) return

  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }

  let deps = depsMap.get(key)
  if (!deps) {
    deps = new Set()
    depsMap.set(key, deps)
  }

  deps.add(activeEffect)
}

// 효과 실행 — set 트랩에서 호출
function trigger(target: object, key: string) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return

  const deps = depsMap.get(key)
  if (!deps) return

  deps.forEach(effect => effect())
}

// reactive 구현
function reactive<T extends object>(target: T): T {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      track(target, key as string)      // 읽을 때 추적
      return typeof result === 'object' && result !== null
        ? reactive(result)               // 중첩 객체도 반응형으로
        : result
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        trigger(target, key as string)   // 변경 시 트리거
      }
      return result
    }
  })
}

// effect 등록
function effect(fn: Function) {
  activeEffect = fn
  fn()               // 최초 실행 — 이때 get이 호출되어 의존성 추적
  activeEffect = null
}

// ref는 value 속성 하나만 가진 객체의 getter/setter로 구현
function ref(rawValue: any) {
  const r = {
    get value() {
      track(r, 'value')
      return rawValue
    },
    set value(newValue) {
      if (rawValue !== newValue) {
        rawValue = newValue
        trigger(r, 'value')
      }
    }
  }
  return r
}

import { shallowRef, shallowReactive, triggerRef } from 'vue'

// shallowRef — .value 변경만 추적, 내부 속성 변경은 무시
const state = shallowRef({ count: 0, nested: { deep: 1 } })
state.value.count = 1     // 반응하지 않음!
state.value = { count: 1, nested: { deep: 1 } }  // 이건 반응함

// 수동 트리거
state.value.count = 2
triggerRef(state)  // 강제로 업데이트 트리거

// shallowReactive — 최상위 속성만 반응형
const shallow = shallowReactive({ a: 1, nested: { b: 2 } })
shallow.a = 10           // 반응함
shallow.nested.b = 20    // 반응하지 않음!

<script setup lang="ts">
import { ref, onRenderTracked, onRenderTriggered } from 'vue'

const count = ref(0)

// 개발 모드에서만 동작
onRenderTracked((event) => {
  // 어떤 반응형 데이터가 추적되었는지
  console.log('추적됨:', event.key, event.type)
})

onRenderTriggered((event) => {
  // 어떤 변경이 리렌더링을 트리거했는지
  console.log('트리거됨:', event.key, event.type, event.newValue)
  debugger  // 브레이크포인트
})
</script>