Svelte는 2016년 Rich Harris가 만든 컴파일러 기반 프론트엔드 프레임워크다. React나 Vue와 달리 가상 DOM을 사용하지 않고, 빌드 시점에 컴포넌트를 순수 JavaScript로 컴파일해 런타임 오버헤드를 없앤다.
React/Vue와 비교
| 항목 | React | Vue | Svelte |
|---|
| 방식 | 가상 DOM | 가상 DOM | 컴파일 |
| 번들 크기 | 큼 | 중간 | 매우 작음 |
| 런타임 | 있음 | 있음 | 거의 없음 |
| 반응성 | useState | ref/reactive | 변수 할당 |
| 학습 곡선 | 보통 | 쉬움 | 매우 쉬움 |
기본 컴포넌트 문법
svelte
<script>
let count = 0;
let name = '세계';
function increment() {
count += 1; // 할당만으로 반응성 트리거
}
// 반응형 선언 ($: 레이블)
$: doubled = count * 2;
$: if (count > 10) {
console.log('10을 넘었습니다!');
}
</script>
<h1>안녕하세요, {name}!</h1>
<button on:click={increment}>
클릭 횟수: {count} (2배: {doubled})
</button>
<style>
/* 자동 스코프 CSS */
h1 { color: navy; }
</style>
스토어 (전역 상태)
javascript
// stores.js
import { writable, derived, readable } from 'svelte/store';
export const count = writable(0);
export const doubled = derived(count, $c => $c * 2);
// 컴포넌트에서
import { count, doubled } from './stores';
count.update(n => n + 1);
$count; // $ 접두사로 자동 구독/해제
$doubled;
Svelte 5 Runes (새 반응성 시스템)
svelte
<script>
// Svelte 5: $state, $derived, $effect
let count = $state(0);
let doubled = $derived(count * 2);
$effect(() => {
console.log('count 변경:', count);
});
</script>
<button onclick={() => count++}>{count}</button>
SvelteKit (풀스택 프레임워크)
javascript
// src/routes/blog/[slug]/+page.server.js
export async function load({ params }) {
const post = await fetchPost(params.slug);
return { post };
}
관련 개념
