First look of Svelte

이 글에서는 Svelte(이하 스벨트) 프레임워크를 공부해보면서 느낀 첫인상과 React와 스벨트가 어떤점이 다른지 비교해보고자 합니다.

Svelte는 무엇인가?

스벨트는 프레임워크입니다.
React나 Vue는 virtualDOM 비교 알고리즘(diffing)을 사용하여 바뀐 부분만 실제 DOM에 적용하는 방식을 사용합니다.

대신에 스벨트는 virtualDOM을 사용하는 대신에 작성한 코드를 빌드할 때 DOM을 업데이트하는 매우 효율적인 명령형(imperative) 코드(순수 자바스크립트)로 변환합니다.

프론트엔드 프레임워크는 계속 개발되고 발전합니다. 이는 바닐라 자바스크립트로 만으로는 복잡한 애플리케이션을 작성하기 어렵기 때문입니다. 하지만 개발할 때는 프레임워크를 통해 쉽게 개발하고 빌드시에만 바닐라 자바스크립트로 바꿔준다면 개발자에게는 DX(Developer Experience)를 높여주고, 사용자에게는 UX(User Experience)를 높여줄 수 있습니다.

You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.(복잡성의 벽에 부딪히지 않고서는 바닐라 자바스크립트로 복잡한 애플리케이션을 작성할 수 없습니다. 그러나 컴파일러는 당신을 위해 그것을 할 수 있습니다.) - RICH HARRIS

많은 프론트엔드 프레임워크들은 브라우저 위에서 실행됩니다. 그리고 그런 프레임워크들은 추상화를 통해 코드의 복잡도와 작성해야하는 코드의 양을 줄여줍니다.

스벨트는 기존 프레임워크와는 다르게 브라우저 위에서 실행되지 않고 브라우저 위에서 실행될 코드로 컴파일합니다. 그렇기 때문에 스벨트를 컴파일러라고도 부릅니다.

기존 프레임워크의 단점인 번들에 프레임워크가 포함되어서 브라우저 위에서 실행된다는 것과는 다르게 스벨트는 그 자체가 컴파일러이자 프레임워크이므로 클라이언트에게 보내지는 번들에 포함되지 않습니다. 이는 클라이언트에게 보내지는 번들 사이즈를 줄이는등의 장점이 있습니다.

단방향 바인딩과 양방향 바인딩

스벨트는 짧고 직관적인 문법을 제공해서 HTML, JavaScript를 이해하고 있다면 바로 적용할 수 있습니다.

<script>
let a = 1;
let b = 2;
</script>

<input type="number" bind:value={a}/>
<input type="number" bind:value={b}/>

<p>{a} + {b} = {a + b}</p>

위의 코드는 input에서 값이 변하면 변수 a, b가 자동으로 업데이트 되도록 bind:value={변수} 형태로 선언한 것입니다. 이렇게하면 첫번째 input의 값이 a변수로, 두번째 input의 값이 b 변수로 바인딩됩니다. 다시 말하면 input 박스의 값이 변하면 자바스크립트 블록의 값에 반영(바인딩)된다는 뜻이기도 합니다.

이 개념을 양방향 바인딩(two-way binding)이라고 합니다. 스크립트 블록의 데이터가 변경되면 뷰에 실시간으로 반영이되고, 반대로 뷰에서 사용자의 마우스 클릭이나 키보드 입력에 의해 데이터가 변경이되면 스크립트 블록의 데이터에 반영됩니다.

반면에 우리가 익숙한 React는 단방향 바인딩입니다. View에서 사용자의 상호작용이 발생하거나 외부로부터 어떤 액션이 들어오면 데이터가 업데이트되고 그 업데이트된 데이터를 기반으로 UI를 그립니다.(UI는 상태의 스냅샷) 오직 액션을 통해 모델을 업데이트할 수 있습니다.이를 단방향 바인딩(one-way-binding)이라고 합니다.

Reactivity(반응성)

반응성(Reactivity)이란 관심있는 무언가에 반응하여 동작하는 것을 말합니다. 인터넷 브라우저의 크기에 반응하여 그에 맞는 페이지 형태를 보여주는 것을 리액티브 웹(reactive web)이라고 합니다. 이렇게 무언가에 반응하여 동작하는 것에 대하여 "리액티브하다" 또는 "반응형이다"라고 말합니다.

The essence of functional reactive programming is to specify the dynamic behavior of a value completely at the time of declaration.(함수형 리액티브 프로그래밍의 본질은 선언 시점에 값의 동적 동작을 완전히 지정하는 것입니다.) - Heinrich Apfelmus, via Michel Weststrate

스벨트는 반응성(Reactivity)이 내장되어 있어서 직관적이고 간단합니다. 스벨트에서 값이 변하면 애플리케이션이 반응(React)합니다.

React에서는 useState API를 활용해서 값이 변하면 애플리케이션이 React(반응)하도록 설계되었습니다. 스벨트에서는 무언가 바뀌었다는것을 감지하기 위해 할당 연산자(=)를 사용합니다.

let count = 0

// 이후에..
count = count + 1

이렇게 하는 것으로써 값이 변경되었다는 것을 감지할 수 있고 이는 뷰에 반영됩니다.

반응성이 조금 더 궁금하시다면 Svelte REPL에 아래 코드를 붙여넣고 테스트해보세요.

<script>
	let count = 0
    
    function handleClick() {
    	count = count + 1
    }
    
    function handleInput(event) {
    	name = event.target.value
    }
</script>

<h1>Hello {name}</h1>
<input value={name} on:input={handleInput}>

<button on:click={handleClick}>
	Clicks: {count}
</button>

장점과 단점

스벨트는 반응성을 통해 코드의 양을 줄일 수 있습니다.

HTML과 JavaScript를 알고 있다면 바로 적용시킬 수 있고 쉽습니다. 양방향 바인딩을 하기 때문에 코드도 매우 직관적입니다. 또한 SvelteKit를 사용해서 Next.js처럼 SSR, Routing등 다양한 기능을 사용할 수 있다는 장점이 있습니다.

제가 느낀 단점은 순수 자바스크립트가 아닌 템플릿 언어처럼 생긴 것을 배워야한다는 것입니다. 마치 React를 처음 배울때 JSX를 배웠던 것처럼 익숙해질것이라고 생각합니다.

생각

가장 빨리 만나는 스벨트라는 책을 읽으며 스벨트에 대해 공부했습니다. 스벨트를 공부하는동안 정말 간단하다라는 생각을 많이 했습니다. React에서는 재조정과 같은 과정이 애플리케이션에서 반복적으로 일어났고 하위 트리를 비교하는 것을 최적화하기 위해 memo, useCallback과 같은 API들이 만들어졌는데 스벨트에서는 컴파일타임에 최적화를 진행하기 때문에 이런 최적화 API도 없고 적은 코드로 애플리케이션을 만들 수 있습니다. 마치 거의 순수 HTML, CSS, JavaScript를 사용하는것과 비슷한 느낌이었습니다.

또한 스벨트 자체적으로 많은 것을 지원해주는게 신기했습니다. 모션, 애니메이션, 트랜지션과 같은 웹을 만드는데 꼭 필요한 요소들을 스벨트는 자체 API로 제공해주기 때문에 편한점도 많았습니다.

마지막으로 React 진영의 프레임워크인 Next.js나 Remix처럼 스벨트에서는 SvelteKit을 제공해서 개발자가 신경써야하는 것을 줄여줍니다.

프레임워크가 번들에 포함되어 브라우저 위에서만 돌아가야하는 것이아닌 컴파일러 자체가 프레임워크가 될 수 있다는 점이 정말 매력적인 것 같습니다.

Reference

• Svelte 공식 문서
• 가장 빨리 만나는 스벨트