Svelte 5와 룬(Runes) : 요즘 자바스크립트 프레임워크의 변화

Svelte라는 자바스크립트 프레임워크, 들어본 적 있나요? 요즘 개발자들 사이에서 점점 인기 있는 이유가 있어요. 간단하고 강력한 기능 덕분인데요, 특히 이번에 나온 Svelte 5에서 룬(Runes)이라는 새로운 기능이 추가되면서 큰 변화가 생겼죠. 이제 리액티브 데이터 처리할 때 달러($) 기호를 안 써도 돼요. 이게 무슨 말이냐면, 코드가 훨씬 간단해지고 깔끔해졌다는 거죠. 복잡하게 고민할 필요 없이 더 직관적으로 작업할 수 있게 됐다는 거예요.

오늘은 Svelte의 룬이 뭔지, 어떻게 작동하는지, 그리고 왜 이렇게 좋은지 한 번 알아볼게요. Svelte가 왜 이 기능을 도입했는지, 기존 방식과 뭐가 다른지도 함께 이야기해볼까요?

 

Svelte 5와 룬(Runes) 이해하기: 현대 자바스크립트 프레임워크의 진화

 

Svelte 5의 룬(Runes)은 뭐야?

룬(Runes)은 Svelte 5에 새로 들어온 기능이에요. 기존에는 리액티브 상태를 관리할 때 달러($) 기호를 사용했잖아요? 이제 그걸 대체하게 된 거예요. 룬은 컴파일러 매크로처럼 작동해서 리액티브 상태를 더 명확하게 다룰 수 있게 해줍니다. 그래서 Svelte 컴포넌트뿐 아니라 일반 자바스크립트나 타입스크립트 파일에서도 리액티브 기능을 쓸 수 있어요. 이게 왜 좋으냐면, 코드 재사용이 훨씬 쉬워졌다는 거죠.

예전에는 let과 $: 문법이 좀 복잡했어요. 그걸 룬 덕분에 해결할 수 있게 된 거예요. 이제 Svelte는 더 일관성 있는 리액티브 시스템을 갖추게 된 거죠. 룬에는 네 가지 주요 타입이 있는데요, state, derived, effect, props 이렇게 네 가지로 나뉩니다. 하나씩 살펴볼까요?

 

룬의 종류는?

1. State Rune

state 룬은 쉽게 말해서 리액티브 변수를 만들어주는 거예요. 자바스크립트의 일반 변수와는 다르게, 이 변수는 값이 바뀌면 자동으로 UI가 업데이트돼요. Svelte 5에서는 state가 기존의 let 문법을 대체하게 됐어요. 덕분에 이 변수가 리액티브라는 게 더 명확해졌고, 코드를 읽기 쉬워졌죠. 특히 Svelte의 컴파일러 매직에 익숙하지 않은 분들에겐 큰 도움이 될 거예요.

2. Derived Rune

derived 룬은 React의 useMemo나 Vue의 computed와 비슷해요. 리액티브 값을 가지고 새로운 값을 계산할 때 사용하죠. 예를 들어, 어떤 값이 바뀔 때만 다시 계산되는 거예요. 이전에는 $: 문법으로 이런 걸 처리했었는데, 이제 derived 룬 덕분에 더 깔끔하고 명확하게 할 수 있게 됐어요.

3. Effect Rune

effect 룬은 React의 useEffect와 비슷해요. 어떤 값이 바뀔 때마다 특정 코드를 실행하고 싶을 때 쓰는 거죠. Svelte 5에서는 effect 룬이 콜백 함수를 받아서, 그 함수에서 사용된 상태 변수를 자동으로 추적해요. 그러니까 그 변수가 업데이트되면 자동으로 효과도 다시 실행되죠. 이전에는 달러($) 기호를 사용해서 했던 것을 이제는 더 명확하게 처리할 수 있어요. 덕분에 코드가 더 직관적이고 실수도 줄어들었어요.

4. Props Rune

props 룬은 컴포넌트에 필요한 입력값을 정의할 때 사용돼요. React나 Vue에서 props를 다루는 방식과 비슷하다고 생각하시면 돼요. 기존의 export let 문법 대신에 Svelte에서도 props를 더 깔끔하게 정의할 수 있게 도와주는 역할을 합니다.

 

Svelte가 룬을 도입한 이유는?

Svelte 5에서 룬을 도입한 이유는 단순해요. 예전 버전에서 개발자들이 불편했던 점을 해결하기 위해서죠. 그 이유 몇 가지를 정리해 보면:

• 명확한 리액티브성: 예전에는 $: 문법과 컴파일러의 마법 같은 기능에 의존했어요. 이게 초보자나 숙련된 개발자에게도 헷갈리기 쉬웠죠. 이제 룬을 사용하면서 어떤 부분이 리액티브한지 더 쉽게 알 수 있어요.
• 범용적인 리액티브 시스템: 예전 리액티브 시스템은 .svelte 파일에서만 작동했어요. 그래서 다른 파일에서 그 로직을 공유하기가 어려웠죠. 이제 룬 덕분에 자바스크립트나 타입스크립트 파일에서도 리액티브성을 사용할 수 있게 되어 코드 재사용성이 훨씬 좋아졌어요.
• 프레임워크의 간소화: Svelte 룬은 리액티브 API를 간소화해서, 네 가지 룬만 잘 이해하면 거의 모든 기능을 사용할 수 있어요. 그래서 배우기도 쉽고, 코드를 유지보수하는 것도 훨씬 편리해졌어요.

 

예전과 새로운 Svelte 문법 비교

룬이 얼마나 달라졌는지 잘 모르시겠다면, 예전의 Svelte 리액티브 문법과 새로운 룬 기반 방식을 비교해 볼게요.

예전에는 이렇게 썼어요:

let count = 0;
$: doubled = count * 2;

$: 문법은 리액티브하게 동작해서, count가 바뀔 때마다 doubled도 자동으로 업데이트되죠. 간단해 보이긴 했지만, 내부에서 어떤 일이 일어나는지 이해하기 어려웠던 경우도 있었어요.

이제 Svelte 5에서는 이렇게 바뀌었어요:

import { state, derived } from 'svelte';

const count = state(0);
const doubled = derived(count, (value) => value * 2);

이렇게 명시적으로 리액티브 상태를 선언하니까, count가 리액티브 상태이고 doubled는 그것을 기반으로 파생된 값이라는 게 명확해졌어요. 특히 대규모 프로젝트에서 유지보수나 확장성이 훨씬 나아진 느낌이에요.

 

Svelte 룬의 장점

Svelte 5의 룬 시스템은 개발자들에게 여러 가지 좋은 점을 제공해요:

1. 명확하고 읽기 쉬운 코드: 리액티브 시스템을 명확하게 보여주니까, 이전처럼 컴파일러의 마법에 의존하지 않아도 돼요. 그래서 Svelte를 처음 배우는 사람도 코드를 쉽게 이해할 수 있어요.
2. 일관된 코드 작성: 이제 .svelte 파일뿐만 아니라 자바스크립트나 타입스크립트 파일에서도 리액티브 로직을 사용할 수 있게 됐어요. 덕분에 개발 과정에서 일관성을 유지하기가 더 쉬워졌죠.
3. 쉽게 배울 수 있는 시스템: 리액티브 시스템이 네 가지 룬으로 정리되면서 배워야 할 내용도 줄었어요. 다양한 문법을 따로 공부할 필요 없이, 이 네 가지만 알면 거의 모든 기능을 사용할 수 있게 되었죠.
4. 유지보수가 간편함: 코드가 명시적으로 작성되니까, 리팩터링하거나 유지보수할 때도 훨씬 편리해졌어요. 데이터 흐름이 명확하니까 종속성 추적도 쉬워지고요.

 

2024년 자바스크립트 프레임워크의 흐름

Svelte가 룬을 도입한 건 Svelte만의 변화가 아니에요. 요즘 자바스크립트 프레임워크 전체가 단순하고 명시적인 리액티브성을 지향하고 있어요. 2024년에는 다양한 프레임워크들이 서로의 장점을 받아들이면서 발전하고 있는 걸 볼 수 있죠:

• React: React도 점점 간단한 컴파일러와 상태 관리 방식을 채택하고 있어요. useMemo와 useEffect 같은 훅은 Svelte 룬과 비슷한 점이 많죠. 그래서 리액티브 로직을 더 예측 가능하고 명시적으로 다룰 수 있게 되었어요.
• Vue: Vue도 Composition API를 통해 컴포넌트 로직을 더 명확하고 유연하게 관리할 수 있는 방식을 도입했어요. 예전 Options API보다 훨씬 직관적이죠.
• Angular: Angular처럼 전통적으로 구조가 엄격한 프레임워크도 SolidJS와 같은 새로운 아이디어를 도입해 리액티브 모델을 개선하려고 노력하고 있어요.

결국 프레임워크를 고를 때 문법보다는 개발자 경험이나 사용 사례에 맞는지를 더 중요하게 여기게 되는 거예요.

 

룬이 Svelte를 망치지 않았을까?

새로운 기능이 추가되면 항상 이런 생각이 들 수 있어요. “이게 정말 나은 걸까?” 하지만 Svelte 5의 룬은 Svelte를 더 좋게 만들어 줬어요. 리액티브성을 관리하는 방식이 명확하고 일관되며, 훨씬 쉽게 다룰 수 있게 됐거든요.

물론 $: 문법의 간단함을 좋아했던 사람들도 있겠지만, 이제는 명확성, 재사용성, 일관성 측면에서 룬이 가져온 이점이 훨씬 커요. 그리고 이 시스템 덕분에 Svelte는 현대 자바스크립트 개발의 모범 사례에 더 잘 맞게 됐고, 다른 프레임워크로 넘어가는 것도 훨씬 쉬워졌어요.