Svelte 편집하기 (부분)

== 주요 개념 ==
=== 컴포넌트 기본 구조 ===
<syntaxhighlight lang="svelte">
<script>
  let name = 'Svelte';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: purple;
  }
</style>
</syntaxhighlight>

=== Runes: Svelte 5의 반응성 재설계 ===
Svelte 4까지는 `let count = 0;` 처럼 그냥 변수를 선언하고 대입하면 컴파일러가 "어? 이 변수는 반응형이네" 하고 '''암묵적으로''' 알아서 추적해주는 방식이었다. 편하긴 한데, 프로젝트가 커지면 "이게 왜 리렌더링이 안 되지?" 같은 디버깅이 골치 아파지는 단점이 있었다.

Svelte 5에서는 이걸 뒤엎고, `$state`, `$derived`, `$effect`, `$props` 같은 '''룬(rune)'''이라는 특수 키워드를 코드에 직접 명시하는 방식으로 바꿨다. "이 변수는 반응형으로 쓸 거다"라고 개발자가 직접 선언하는 셈이라, 코드만 봐도 어디가 반응형인지 한눈에 파악할 수 있게 됐다는 게 코어팀의 설명이다. 이 룬들은 함수 호출이 아니라 컴파일러가 알아보는 특수 문법이며, `.svelte` 파일 밖에서도(`.svelte.js`, `.svelte.ts`) 사용할 수 있어 상태 로직을 컴포넌트 바깥으로 분리하기도 훨씬 쉬워졌다.

<syntaxhighlight lang="svelte">
<script>
  // Svelte 4 스타일 (구문법, 여전히 하위 호환됨)
  let count = 0;
  $: doubled = count * 2;
</script>

<script>
  // Svelte 5 Runes 스타일
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count}, Doubled: {doubled}
</button>
</syntaxhighlight>

이벤트 바인딩 문법도 `on:click`에서 표준 DOM 속성에 가까운 `onclick`으로 바뀌는 등 세부적인 변화가 있다. 다만 Svelte 코어팀은 하위 호환성을 강하게 신경 써서, 기존 Svelte 4식 컴포넌트도 강제 마이그레이션 없이 그대로 동작하도록 설계했다. 덕분에 기존 프로젝트는 새 컴포넌트에만 룬을 적용하는 식으로 점진적으로 넘어갈 수 있다.

=== Props ===
<syntaxhighlight lang="svelte">
<script>
  // Svelte 5
  let { message } = $props();
</script>

<p>{message}</p>
</syntaxhighlight>

=== 반복문/조건문 ===
<syntaxhighlight lang="svelte">
{#if count > 0}
  <p>양수입니다</p>
{:else}
  <p>0 이하입니다</p>
{/if}

{#each items as item}
  <li>{item}</li>
{/each}
</syntaxhighlight>