반응성 심화 — Proxy, Signal, 그리고 Fine-grained Reactivity

// Signal의 개념적 구현 (실제 Svelte 내부는 더 복잡)
function createSignal(initialValue) {
  let value = initialValue;
  const subscribers = new Set();

  return {
    get() {
      // 현재 실행 중인 effect가 있으면 구독 등록
      if (currentEffect) subscribers.add(currentEffect);
      return value;
    },
    set(newValue) {
      value = newValue;
      // 모든 구독자에게 알림
      subscribers.forEach(fn => fn());
    }
  };
}

<script>
  // $state는 원시값에는 Signal을, 객체에는 Proxy를 적용합니다
  let count = $state(0);       // Signal
  let user = $state({          // Proxy
    name: '홍길동',
    address: {                 // 중첩 Proxy
      city: '서울'
    }
  });

  // Proxy 덕분에 중첩 속성 변경도 자동 감지
  user.address.city = '부산';  // UI 자동 업데이트!
</script>

<script>
  let user = $state({ name: '홍길동', age: 25 });

  // 1. 구조 분해 — 반응성 끊김!
  let { name, age } = user;
  // name은 이제 일반 문자열. user.name을 바꿔도 name은 안 바뀜

  // 2. 올바른 방법 — 직접 참조
  // 템플릿에서 {user.name}을 사용하세요

  // 3. 함수로 전달할 때 주의
  function processUser(u) {
    // u가 Proxy면 반응성 유지, 구조분해된 값이면 끊김
  }
</script>

<p>{user.name}</p>  <!-- 반응성 유지 -->
<p>{name}</p>       <!-- 반응성 끊김 — 초기값에 고정 -->

<script>
  // $state — Proxy로 감싸서 모든 속성 접근/변경을 추적
  let deep = $state({ items: [1, 2, 3] });
  // typeof deep === 'object' (실제로는 Proxy)
  // deep.items도 Proxy

  // $state.raw — Proxy 없음, 변수 자체의 재할당만 추적
  let raw = $state.raw({ items: [1, 2, 3] });
  // typeof raw === 'object' (순수 객체)

  // 성능 차이
  // deep: 모든 속성 접근에 Proxy trap 발동 (오버헤드 있음)
  // raw: 일반 객체 접근 속도 (빠름)
</script>

<script>
  let firstName = $state('길동');
  let lastName = $state('홍');
  let age = $state(25);
</script>

<!-- firstName이 바뀌면 이 <p>만 업데이트 -->
<p>{firstName}</p>

<!-- lastName이 바뀌면 이 <p>만 업데이트 -->
<p>{lastName}</p>

<!-- age가 바뀌면 이 <p>만 업데이트 -->
<p>{age}세</p>

<!-- React는 셋 중 하나만 바뀌어도 전체 컴포넌트를 다시 렌더링합니다 -->

<script>
  let items = $state([1, 2, 3]);

  // $state 배열은 push, splice 등 변경 메서드가 반응형으로 동작
  items.push(4);        // UI 업데이트됨
  items.splice(0, 1);   // UI 업데이트됨
  items[0] = 99;        // UI 업데이트됨

  // $state.raw 배열은 재할당만 감지
  let rawItems = $state.raw([1, 2, 3]);
  rawItems.push(4);                    // UI 안 바뀜!
  rawItems = [...rawItems, 4];         // UI 업데이트됨
</script>

<script>
  let items = $state([1, 2, 3, 4, 5]);
  let threshold = $state(3);

  // $derived는 의존하는 값이 바뀔 때만 재계산됩니다
  let filtered = $derived(items.filter(i => i > threshold));

  // items나 threshold가 안 바뀌면 filtered도 재계산 안 됨
  // React의 useMemo와 비슷하지만, 의존성 배열을 수동으로 관리할 필요 없음
</script>