Svelte 5의 새로운 기능: Rune, Signals, Snippets

Svelte 5가 출시되면서 리액티비티 시스템이 Rune 기반으로 전면 재설계됐다. $state, $derived, $effect 세 가지 Rune이 기존의 암묵적인 top-level let 선언과 $: 문법을 대체하며, Signals 기반 미세 의존성 추적으로 정확하고 예측 가능한 상태 관리를 제공한다. Snippets가 slot 시스템을 대체하고, 컴포넌트를 일반 JS 함수로 처리해 엔진 레벨 최적화가 가능해졌다.

핵심 포인트

$state, $derived, $effect Rune이 기존 top-level let과 $: 문법을 대체해 명시적인 반응형 상태 관리를 제공한다
Signals 기반 미세 의존성 추적으로 실제 변경된 부분만 정확히 재계산된다
.svelte.js/.svelte.ts 파일에서 Rune을 사용해 컴포넌트 외부에서 공유 반응형 상태를 정의할 수 있어 prop drilling과 복잡한 store 설정을 없앴다
Snippets가 Svelte 4의 slot 시스템을 대체해 재사용 가능한 마크업 블록을 prop으로 전달할 수 있다
컴포넌트를 일반 JavaScript 함수로 처리해 빌드 도구와 JS 엔진이 직접 최적화하고 인라인화할 수 있다

상세 정리

$state Rune: 반응형 변수를 선언하는 Rune. Svelte 4의 top-level let 선언을 대체하며, 값 변경 시 자동으로 컴포넌트 전체에 전파된다
$derived Rune: 다른 상태나 derived 값을 기반으로 계산된 반응형 값을 만든다. $: 문법을 대체하며 다음 읽기 시점까지 재계산을 지연한다
$effect Rune: 상태 변경에 반응해 코드를 실행한다. 캔버스 렌더링이나 외부 라이브러리 연동에 유용하며, Svelte는 과도한 side effect보다 선언적 접근을 권장한다
Signals: 값 변경을 구독자에게 알리는 컨테이너로 정확한 의존성 추적을 가능하게 한다. 개발자는 반응형 값을 직접 다루고 컴파일러가 signal 메커니즘을 관리한다
유니버설 리액티비티: .svelte.js/.svelte.ts 파일로 컴포넌트 외부에서 공유 상태를 정의할 수 있어 prop drilling 제거, store 설정 간소화, 보일러플레이트 감소 효과가 있다
함수형 컴포넌트: Svelte 5는 컴포넌트를 일반 JS 함수로 처리해 빌드 도구와 JS 엔진이 직접 최적화 가능하다. 타 프레임워크와 달리 컴포넌트를 callee에 직접 인라인화할 수 있다
네이티브 TypeScript: 전처리 레이어 없이 마크업 안에서 직접 TypeScript 어노테이션을 사용할 수 있어 소스맵 관리가 간소화되고 빌드가 빨라진다
Snippets: {#snippet} 태그로 재사용 가능한 마크업 블록을 정의하고 {@render}로 호출한다. 컴포넌트 간 prop으로 전달도 가능해 Svelte 4의 slot 시스템을 대체한다
Vite 통합: SvelteKit이 Vite 에코시스템을 활용해 Vitest(테스팅), Storybook(컴포넌트 개발), 최적화된 HMR을 최소 설정으로 사용할 수 있다
커뮤니티: Stack Overflow 2024 만족도 73%, 주요 채택 기업으로 Apple, IKEA, Yelp, Hugging Face가 있다

왜 읽나Svelte 4에서 5로의 마이그레이션을 검토 중이거나 Svelte를 처음 배우는 프론트엔드 개발자에게 Rune/Signals/Snippets 핵심 변경 사항과 새로운 패턴을 한눈에 파악할 수 있는 가이드다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Svelte 5의 새로운 기능: Rune, Signals, Snippets

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기