룬(Runes): Svelte의 반응성 문법

룬(Runes): Svelte의 반응성 문법

Svelte를 컴파일러로 생각해보면, 컴포넌트를 기술하는 .svelte 파일에 룬(runes) 이라는 작은 기호가 등장해요. $state, $derived, $effect 같은 이름이 붙은 이 문법들이 Svelte가 컴파일할 때 무엇을 어떻게 반응형으로 만들지 알려줘요. 룬은 마치 프레임워크가 이해하는 '키워드'라서, 일반 함수와는 다르게 동작해요.

룬은 $ 접두사가 붙고 함수처럼 보이지만, 사실 값이 아니에요. 변수에 담거나 인자로 넘길 수 없고, JavaScript 키워드처럼 정해진 위치에서만 유효해요. 이 글에서는 룬이 무엇인지, 어떤 특징이 있는지를 먼저 잡고 넘어갈게요.

출처: Svelte 공식 문서 — What are runes?

룬이란

룬은 .svelte 파일과 .svelte.js/.svelte.ts 파일 안에서 Svelte 컴파일러를 제어하는 기호예요. Svelte를 하나의 언어로 본다면, 룬은 그 언어의 문법 일부 — 즉 키워드에 해당해요.

룬은 $ 접두사가 붙고 함수처럼 보여요:

let message = $state('hello');

그런데 일반 JavaScript 함수와 달라지는 점이 몇 가지 있어요.

  • import 할 필요가 없어요 — 언어의 일부라서 그냥 쓰면 돼요.
  • 값이 아니에요 — 변수에 담거나 함수의 인자로 넘길 수 없어요.
  • 정해진 위치에서만 유효해요 — JavaScript 키워드처럼, 잘못된 위치에 두면 컴파일러가 알려줘요.

⚠️ 룬은 Svelte 5부터 등장했어요. 그 이전 버전에는 없던 개념이에요.

더 알아보기