Svelte

Svelte

Svelte는 컴파일러 기반 UI 프레임워크예요. React나 Vue처럼 런타임에 가상 DOM을 그리며 비교하는 대신, 빌드 단계에서 컴포넌트를 네이티브 DOM 조작 코드로 변환해요. 그래서 번들 크기가 작고, 브라우저가 할 일이 적어서 가볍게 느껴지죠. 상태 변화에 따라 UI를 다시 그리는 '반응성'도 개발자가 신경 써서 관리할 것을 요구하는 대신, 프레임워크가 필요한 부분만 정밀하게 갱신해줘요.

Svelte 5부터는 $state, $props 같은 룬(runes) 을 써서 반응성을 선언하는 방식이 기본이 됐어요. 이 카테고리에서는 룬을 통한 반응형 상태, 컴포넌트 props, 스토어, 컨텍스트, 라이프사이클 훅까지 Svelte의 핵심 개념을 순서대로 정리해요.

이 카테고리의 문서

  • 룬(Runes): Svelte의 반응성 문법이 어떻게 생겼는지, $state로 반응형 상태를 만드는 방법
  • 컴포넌트($props): 컴포넌트에 props를 전달하고 받는 방법, 기본값·타입 안전성
  • 스토어(Stores): 컴포넌트 간 반응형 상태를 공유하는 클래식한 방법과 svelte/store
  • 컨텍스트(Context): props를 거치지 않고 부모가 자식에게 값을 제공하는 방법
  • 라이프사이클 훅(Lifecycle hooks): 컴포넌트의 생성·파괴 시점에 실행되는 코드

더 알아보기