반응성 기초 — $state, $derived, $effect 제대로 이해하기

<script>
  // 원시 값
  let count = $state(0);
  let name = $state('Svelte');

  // 객체 — 깊은 반응성(deep reactivity) 제공
  let user = $state({
    name: '홍길동',
    age: 25,
    hobbies: ['코딩', '독서']
  });

  function increment() {
    count++;  // 직접 변경 가능! setState() 같은 래퍼 불필요
  }

  function addHobby() {
    // 객체 내부 속성도 직접 변경 가능
    user.hobbies.push('운동');
  }
</script>

<button onclick={increment}>횟수: {count}</button>
<p>{user.name}의 취미: {user.hobbies.join(', ')}</p>
<button onclick={addHobby}>취미 추가</button>

// React — setter 함수 필수, 불변성 유지 필요
const [count, setCount] = useState(0);
setCount(prev => prev + 1);

const [user, setUser] = useState({ name: '홍길동', hobbies: [] });
setUser(prev => ({ ...prev, hobbies: [...prev.hobbies, '운동'] }));

<!-- Svelte — 직접 변경, 가변(mutable) 방식 -->
<script>
  let count = $state(0);
  count++;  // 끝!

  let user = $state({ name: '홍길동', hobbies: [] });
  user.hobbies.push('운동');  // 배열 메서드 직접 사용 가능
</script>

<script>
  // 내부 속성 변경은 감지하지 않음 — 재할당만 감지
  let items = $state.raw([1, 2, 3]);

  function update() {
    // items.push(4);  // 이건 UI에 반영되지 않음
    items = [...items, 4];  // 재할당해야 반영됨
  }
</script>

<script>
  let count = $state(0);
  let items = $state(['사과', '바나나', '딸기']);

  // count가 바뀌면 자동으로 재계산
  let doubled = $derived(count * 2);
  let isEven = $derived(count % 2 === 0);

  // 배열 기반 파생 값
  let itemCount = $derived(items.length);
  let summary = $derived(`총 ${items.length}개의 과일`);
</script>

<p>원본: {count}, 2배: {doubled}, 짝수: {isEven}</p>
<p>{summary}</p>

<script>
  let items = $state([
    { name: '사과', price: 1000, quantity: 3 },
    { name: '바나나', price: 500, quantity: 5 },
  ]);

  // 복잡한 계산 로직
  let totalPrice = $derived.by(() => {
    let total = 0;
    for (const item of items) {
      total += item.price * item.quantity;
    }
    return total;
  });
</script>

<p>총 금액: {totalPrice.toLocaleString()}원</p>

<script>
  let count = $state(0);
  let query = $state('');

  // count가 변경될 때마다 자동 실행
  // 의존성을 명시하지 않아도 컴파일러가 자동 추적!
  $effect(() => {
    console.log(`현재 카운트: ${count}`);
  });

  // 정리(cleanup) 함수
  $effect(() => {
    const timer = setInterval(() => {
      count++;
    }, 1000);

    // 컴포넌트 언마운트 또는 다음 실행 전에 호출
    return () => clearInterval(timer);
  });

  // 디바운스 검색 예시
  $effect(() => {
    if (!query) return;

    const timeout = setTimeout(() => {
      console.log(`검색: ${query}`);
    }, 300);

    return () => clearTimeout(timeout);
  });
</script>

<input bind:value={query} placeholder="검색어 입력" />

<script>
  let messages = $state([]);

  // DOM이 업데이트되기 전에 실행됩니다
  $effect.pre(() => {
    // 스크롤 위치 저장 같은 작업에 유용
    console.log('DOM 업데이트 전:', messages.length);
  });
</script>

$state  ──▶  $derived  ──▶  $effect
(원본 상태)   (파생 값)      (부수 효과)

<script>
  // 1. 원본 상태
  let celsius = $state(0);

  // 2. 파생 값 — celsius가 바뀌면 자동 재계산
  let fahrenheit = $derived(celsius * 9/5 + 32);

  // 3. 부수 효과 — fahrenheit가 바뀌면 자동 실행
  $effect(() => {
    if (fahrenheit > 100) {
      console.log('경고: 매우 높은 온도!');
    }
  });
</script>

<input type="number" bind:value={celsius} /> °C
<p>= {fahrenheit} °F</p>

<script>
  let count = $state(0);

  // 이렇게 하면 무한 루프!
  // $effect(() => {
  //   count = count + 1;
  // });

  // $derived를 사용하세요
  let doubled = $derived(count * 2);
</script>

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  // doubled = 10;  // 에러! $derived 값은 변경 불가
</script>