라이프사이클 — 컴포넌트의 탄생부터 소멸까지

생성 (Initialization)
    ↓
마운트 (Mount) — DOM에 삽입
    ↓
업데이트 (Update) — 상태 변경 시 반복
    ↓
소멸 (Destroy) — DOM에서 제거

<script>
  import { onMount } from 'svelte';

  let data = $state(null);
  let canvas = $state(null);

  // DOM이 마운트된 직후 실행
  onMount(() => {
    console.log('컴포넌트가 마운트되었습니다');

    // API 호출 — 가장 흔한 사용 사례
    fetch('/api/data')
      .then(r => r.json())
      .then(d => data = d);

    // 정리 함수 반환 가능 (onDestroy 대체)
    return () => {
      console.log('컴포넌트가 제거됩니다');
    };
  });

  // Canvas 초기화 — DOM 요소가 필요한 작업
  onMount(() => {
    if (canvas) {
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ff3e00';
      ctx.fillRect(0, 0, 100, 100);
    }
  });
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>

<script>
  import { onDestroy } from 'svelte';

  let count = $state(0);

  // 타이머 설정
  const interval = setInterval(() => {
    count++;
  }, 1000);

  // 컴포넌트가 제거될 때 타이머 정리
  onDestroy(() => {
    clearInterval(interval);
    console.log('타이머 정리 완료');
  });
</script>

<p>경과 시간: {count}초</p>

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

  // 마운트 시 + 의존성 변경 시 실행
  $effect(() => {
    console.log('count가 변경됨:', count);
  });

  // 정리 함수로 언마운트 처리
  $effect(() => {
    const handler = (e) => console.log('키 입력:', e.key);
    window.addEventListener('keydown', handler);

    // 정리 — 다음 실행 전 또는 언마운트 시 호출
    return () => {
      window.removeEventListener('keydown', handler);
    };
  });

  // 디바운스 패턴
  $effect(() => {
    if (!query) return;

    const timeout = setTimeout(async () => {
      const res = await fetch(`/api/search?q=${query}`);
      console.log(await res.json());
    }, 300);

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

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

  // DOM이 업데이트되기 전에 실행
  $effect.pre(() => {
    // 새 메시지 추가 전 스크롤 위치 기록
    if (chatContainer) {
      const isAtBottom =
        chatContainer.scrollHeight - chatContainer.scrollTop ===
        chatContainer.clientHeight;

      // DOM 업데이트 후 스크롤 유지를 위한 준비
      if (isAtBottom) {
        // tick() 후에 스크롤 이동하는 로직
      }
    }
  });
</script>

<script>
  import { tick } from 'svelte';

  let text = $state('');
  let textArea = $state(null);

  async function handleInput() {
    text = text.toUpperCase();

    // DOM 업데이트가 완료될 때까지 대기
    await tick();

    // DOM이 업데이트된 후의 작업
    textArea?.setSelectionRange(text.length, text.length);
  }
</script>

<textarea bind:this={textArea} bind:value={text} oninput={handleInput}></textarea>

<script>
  import { onMount } from 'svelte';

  let userId = $state(1);
  let userData = $state(null);

  // onMount — 최초 1회만 실행
  onMount(() => {
    console.log('컴포넌트 마운트됨');
  });

  // $effect — userId가 바뀔 때마다 다시 실행
  $effect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(d => userData = d);
  });
</script>

<script>
  import { onMount } from 'svelte';

  let element = $state(null);
  let isVisible = $state(false);

  onMount(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        isVisible = entry.isIntersecting;
      },
      { threshold: 0.5 }
    );

    if (element) observer.observe(element);

    return () => observer.disconnect();
  });
</script>

<div bind:this={element} class:visible={isVisible}>
  {isVisible ? '화면에 보임!' : '화면 밖'}
</div>

<style>
  div {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s;
  }
  .visible {
    opacity: 1;
    transform: translateY(0);
  }
</style>