[Svelte] Svelte5 기본 문법과 핵심 개념

새로운 구조를 통해 드러나는 Svelte 5의 숨결

웹 개발의 세계는 끊임없는 흐름 속에서 형태를 바꾸며 확장되어 왔다. 그 여정 안에서 Svelte는 언제나 다른 프레임워크와는 어딘가 다른, 고요하고도 단순한 방식으로 개발자에게 다가섰다. 가상 DOM을 의도적으로 비껴가며 컴파일 단계에서 불필요한 무게를 덜어내는 구조, 직관적인 문법으로 반응성을 조형하던 특유의 스타일은 많은 이들에게 매혹적인 경험을 선사해 왔다.

 

그러나 애플리케이션 규모가 커지고 컴포넌트 간 상호작용이 복잡해짐에 따라 더 명확한 상태 관리 구조와 확장 가능한 반응성 모델이 요구되기 시작했다. 이러한 시대적 요구 속에서 탄생한 Svelte 5는 기존의 단순함을 잃지 않으면서도 반응성 기반을 정제하여 보다 견고한 기반 위에 설 수 있도록 설계되었다.

 

특히 Runes 구조를 중심으로 하는 새로운 문법은 컴포넌트의 본질을 더욱 선명하게 드러내고, 개발자가 애플리케이션의 맥을 정확하게 짚을 수 있도록 돕는다.

 

이 글에서는 Svelte 5의 기본 문법과 핵심 개념을 천천히 짚어내며, 이전 버전과의 차이 속에서 드러나는 방향성을 함께 살펴보고자 한다.

 

컴포넌트 구조 – 단순함 속에서 드러나는 명료한 윤곽

Svelte 5의 컴포넌트 구조는 이전 버전과 크게 다르지 않아 보이지만, 내부적으로는 몇 가지 중요한 방향 전환이 이루어졌다. 특히 상태와 반응성의 경계가 Runes로 명확해지면서, 컴포넌트는 **“역할이 분명한 단위”**로 재정의되었다.

가장 기본적 형태는 다음과 같다.

<script>
  import { $state } from 'svelte/runes';

  const message = $state('Hello Svelte 5');
</script>

<p>{message.get()}</p>

 

이전 버전에서 암묵적인 반응성은 message = '...'와 같은 재할당 동작을 기반으로 이루어졌지만, Svelte 5는 상태를 명확한 객체로 다루기 때문에 컴포넌트의 흐름을 더 쉽게 추적할 수 있다.

 

또한 스타일 구성 방식, 템플릿 구조, 이벤트 처리 방식 등 Svelte의 기본 뼈대는 익숙하면서도 더욱 직관적으로 정비되었다. 개발자 입장에서 Svelte 5는 복잡한 규칙이 늘어난 것이 아니라, 기존에 존재하던 암묵적 규칙을 더 선명하게 드러낸 형태라 할 수 있다.

반응성 – Runes가 재정의한 상태의 숨결

Svelte 5 변화의 중심에는 단연 Runes 모델이 있다. 상태 관리의 근원이 명확해지고, 읽기와 쓰기 과정이 분리되며, 반응성의 작동 방식이 데이터 자체의 성질로 고정된다. 이러한 구조는 애플리케이션의 흐름을 더 예측 가능하게 만들고, 대규모 프로젝트에서도 일관성을 유지하게 한다.

1) 기본 상태 선언

<script>
  import { $state } from 'svelte/runes';

  const count = $state(0);
</script>

<p>{count.get()}</p>

count는 단순한 숫자가 아니라 하나의 상태 객체이며, .get()을 통해 값을 읽고 .set()을 통해 값을 갱신한다.

2) 상태 갱신

 

function increment() {
  count.set(count.get() + 1);
}

이는 이전 Svelte에서 사용되던 count += 1과 같은 암묵적 반응성을 대체하는 명확한 구조다.

3) 파생 상태

<script>
  import { $state, $derived } from 'svelte/runes';

  const numbers = $state([1,2,3,4]);
  const total = $derived(() => numbers.get().reduce((a,b) => a+b,0));
</script>

<p>{total.get()}</p>

 

여기서 total은 numbers의 상태 변화를 자동으로 추적한다.
이전 버전에서 $: 문법이 주도하던 파생 값의 계산은 이제 명시적 선언을 통해 더 안정적으로 구성된다.

이러한 변화는 단순히 문법의 전환이 아니라, 반응성 자체의 뼈대를 재구축한 변화라 할 수 있다.

이벤트 처리 – 소박한 문법 안에 담긴 명료한 의도

Svelte 5의 이벤트 처리 방식은 이전 버전과 거의 유사하나, 상태 흐름이 명확해진 덕에 이벤트와 상태 간 관계가 더욱 단단히 연결된다.

1) 기본 이벤트 처리

<script>
  import { $state } from 'svelte/runes';

  const text = $state('');
  function update(e) {
    text.set(e.target.value);
  }
</script>

<input type="text" on:input={update} />
<p>{text.get()}</p>

이 구조는 페이지 상에서 사용자가 입력한 모든 움직임을 직관적으로 담아내며, 상태와 이벤트의 연결을 부드럽게 이어준다.

2) 이벤트와 파생 상태의 결합

 

<script>
  import { $state, $derived } from 'svelte/runes';

  const first = $state('');
  const last = $state('');
  const full = $derived(() => `${first.get()} ${last.get()}`);
</script>

<input on:input={(e)=>first.set(e.target.value)} />
<input on:input={(e)=>last.set(e.target.value)} />
<p>{full.get()}</p>

 

입력의 변화가 자연스럽게 파생 상태로 이어지며, 컴포넌트는 마치 유기적으로 호흡하듯 값을 재조합한다.

이러한 구조 속에서 Svelte 5의 문법은 복잡한 장식을 배제한 채, 기능의 본질만을 가만히 드러내 보여준다.

단순함의 깊이를 확장한 Svelte 5의 기초

Svelte 5의 기본 문법과 핵심 개념은 이전 버전의 정신을 유지하면서도 반응성과 상태의 본질을 보다 투명하게 드러내기 위해 정교하게 다듬어졌다. 컴포넌트는 역할이 선명해지고, 반응성은 구조적 기반 위에서 작동하며, 이벤트 처리는 그 흐름을 자연스럽게 잇는 실과 같아졌다.

 

Svelte 5는 단순함을 고집하는 프레임워크가 아니라, 단순함 속에서 깊이를 확장해 나가는 길을 선택한 프레임워크라 할 수 있다.
이러한 변화는 기초 문법을 익히는 단계에서도 충분히 체감할 수 있으며, 더 큰 시스템을 구성할 때 더욱 강력한 효과를 발휘하게 된다.