Svelte 4에서 5로 — 마이그레이션 가이드

Svelte 5는 하위 호환성을 유지하면서 점진적 마이그레이션을 지원합니다 — 한 번에 다 바꿀 필요가 없습니다.

개념 정의

Svelte 5는 Runes 기반의 새로운 반응성 시스템을 도입했지만, Svelte 4 문법도 계속 동작합니다. 점진적으로 마이그레이션할 수 있습니다.

주요 변경사항 요약

Svelte 4	Svelte 5	비고
`let count = 0` (암시적 반응성)	`let count = $state(0)`	명시적 반응성
`$: doubled = count * 2`	`let doubled = $derived(count * 2)`	파생 값
`$: { console.log(count) }`	`$effect(() => { console.log(count) })`	부수 효과
`export let name`	`let { name } = $props()`	Props 선언
`on:click={handler}`	`onclick={handler}`	이벤트 핸들링
`createEventDispatcher`	콜백 props	컴포넌트 이벤트
`<slot>`	`{@render children()}`	컨텐츠 주입
`<slot name="x">`	`{#snippet x()}`	네임드 슬롯

단계별 마이그레이션

1단계: Props 마이그레이션

SVELTE

<!-- Svelte 4 -->
<script>
  export let name;
  export let age = 25;
  export let onSelect;
</script>

<!-- Svelte 5 -->
<script>
  let { name, age = 25, onSelect } = $props();
</script>

2단계: 반응성 마이그레이션

SVELTE

<!-- Svelte 4 -->
<script>
  let count = 0;
  $: doubled = count * 2;
  $: if (count > 10) console.log('10 초과!');
</script>

<!-- Svelte 5 -->
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
  $effect(() => {
    if (count > 10) console.log('10 초과!');
  });
</script>

3단계: 이벤트 마이그레이션

SVELTE

<!-- Svelte 4 -->
<button on:click={handleClick}>클릭</button>
<button on:click|preventDefault={handleSubmit}>제출</button>

<!-- Svelte 5 -->
<button onclick={handleClick}>클릭</button>
<button onclick={(e) => { e.preventDefault(); handleSubmit(e); }}>제출</button>

4단계: 슬롯 → Snippet 마이그레이션

SVELTE

<!-- Svelte 4 -->
<div class="card">
  <slot name="header" />
  <slot />
  <slot name="footer" />
</div>

<!-- Svelte 5 -->
<script>
  let { header, children, footer } = $props();
</script>
<div class="card">
  {#if header}{@render header()}{/if}
  {@render children()}
  {#if footer}{@render footer()}{/if}
</div>

자동 마이그레이션 도구

BASH

# Svelte 5 마이그레이션 스크립트 실행
npx sv migrate svelte-5

이 명령은 대부분의 기계적 변환을 자동으로 처리합니다. 하지만 복잡한 패턴은 수동 확인이 필요합니다.

호환 모드

Svelte 5는 Svelte 4 문법을 "레거시 모드"로 계속 지원합니다. 한 프로젝트에서 두 문법을 혼용할 수 있어, 파일 단위로 점진적 마이그레이션이 가능합니다.

SVELTE

<!-- 이 파일은 Svelte 4 문법 (계속 동작) -->
<script>
  export let name;
  let count = 0;
  $: doubled = count * 2;
</script>

<button on:click={() => count++}>{doubled}</button>

면접 포인트

"Runes를 도입한 이유는?": Svelte 4의 $: 반응성은 컴포넌트 스코프에서만 동작했고, 어떤 변수가 반응형인지 코드만 보고 판단하기 어려웠습니다. Runes는 명시적이고 어디서든(.svelte.js 파일 포함) 사용 가능합니다.
"마이그레이션 전략은?": Big Bang 방식(한 번에 전부)보다 점진적 방식(파일별)을 권장합니다. 새 파일은 Svelte 5 문법, 기존 파일은 필요할 때 마이그레이션합니다.

정리

Svelte 4→5 마이그레이션은 "점진적"이 핵심입니다. 두 문법이 공존 가능하므로 서두를 필요가 없고, 자동 도구도 제공됩니다. 새로운 코드부터 Runes를 사용하고, 기존 코드는 여유 있게 전환하면 됩니다.