Svelte란?

7 min readMay 26, 2021

Svelte는 User Interface(사용자 인터페이스)를 구축한다는 측면에서 React나 Vue와 같은 자바스크립트 프레임워크와 비슷합니다. 하지만 매우 중요한 차이점이 있는데 Svelte는 구현된 애플리케이션을 런타임에 해석하는 것이 아니라 이미 빌드 시점에 자바스크립트로 변환을 합니다. (React나 Vue는 런타임 시점에 해석을 합니다)

그래서 정확히는 Svelte는 프레임워크가 아니라 자바스크립트 컴파일러라고 봐야 합니다. Svelte로 구현한 모든 코드는 빌드 시점에 bundle.js라는 하나의 파일로 바닐라 JS로 컴파일 됩니다.

즉 Svelte로 개발된 애플리케이션은 빌드가 끝나면 bundle.js 하나의 파일로 만들어지기 때문에 이 파일 하나만 배포하면 되고, 이 파일을 실행시키기 위한 별도의 Svelte 라이브러리를 포함할 필요가 없습니다.

Svelte의 장점 및 특징을 살펴보기 전에 Svelte가 얼마나 인기있는 라이브러리로 성장하고 있는지 통계를 살펴보도록 하겠습니다.

출처: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

Satisfaction(만족도)

Interest(관심도)

Svelte가 만족도와 관심도 부분에서 React, Vue 같은 프레임워크를 재치고 1위에 올라 있습니다.

그렇다면 왜 이렇게 Svelte가 점점 개발자들에게 인기가 높아지고 있을까요?

Svelte의 장점

Svelte 공식 사이트에 접속하면, 첫 페이지에서 Write less code, No virtual DOM, Truly reactive 라는 3가지 특징을 강조해서 보여주고 있습니다.

Write less code — Svelte로 작성한 코드는 확실히 react, vue, angular 같은 다른 자바스크립트 기반의 프론트엔드 프레임워크 코드에 비해서 현저히 코드 길이가 적습니다.
No virtual DOM — Svelte는 가상돔을 사용하지 않고도 충분히 빠른 성능을 보여줍니다.
Truly reactive — Svelte는 데이터 뿐만 아니라 함수나 조건문 같은 코드에도 반응형 구현이 가능해서 코드를 굉장히 효율적으로 구현할 수 있습니다.

Write less code

다음은 동일한 기능을 Svelte, React, Vue로 각각 구현 했을 때의 코드입니다.

Svelte

<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>

React

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Vue

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

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

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

위의 예제 코드를 보면 알 수 있듯이 확실히 Svelte로 구현한 코드의 길이가 적은 것을 확인할 수 있습니다.

No virtual DOM

HTML DOM은 트리구조로 되어 있어서 웹 화면에 요소가 많아지고 복잡도가 증가할 수록 끊임없이 연결된 트리구조를 갖게 되고, 웹 화면에 변경이 일어날 때 마다 이러한 트리구조의 갱신이 일어나야 하고 이 작업은 굉장히 큰 성능 저하를 가져오게 되는 것입니다.

예를 들어 여러분이 보고 있는 웹화면에 광고 배너가 있습니다. 여러분이 배너를 클릭을 했고, 광고 팝업이 보여졌다라고 가정해 보겠습니다. 이때 웹은 내부적으로 DOM의 트리구조를 갱신하게 됩니다. 이렇게 웹에 작은 변화가 있을 때 마다 DOM 트리구조를 모두 갱신하는 비효율성으로 인해 웹의 복잡도가 큰 화면이라면 이러한 작업은 치명적인 성능 저하를 가져오게 되는 것입니다.

이러한 단점을 극복하고 빠르고 고성능을 가진 웹 애플리케이션을 위해 나온것이 React 입니다.

React는 이러한 DOM의 문제를 개선하기 위해서 Virtual DOM(가상 돔) 개념을 제공하게 됩니다. Virtual DOM은 실제 DOM 문서를 추상화하여, 변화가 많은 화면(View)을 DOM에서 직접 처리하는 방식이 아닌, 가상의 DOM을 만들어서 메모리에서 처리를 한 후 실제 DOM과 동기화함으로써 기존 DOM이 가지고 있던 단점을 개선하고 웹에서도 고성능 애플리케이션을 구현할 수 있도록 하였습니다.

분명 Virtual DOM은 빠르지만, 브라우저 돔의 갱신 여부를 비교하는 오버헤드가 발생하고 Svelte는 Virtual DOM을 사용하지 않고도, 오버헤드 없이 충분히 빠르게 DOM을 갱신할 수 있다고 합니다.

Truly reactive

Angular나 Vue와 같은 프레임워크는 데이터와 DOM을 서로 연결해서(Two-Way Binding) 어느 한쪽에 변경사항이 발생하면 다른 한쪽에 바로 반영이 되는 반응성(reactive) 기능을 제공합니다. Svelte는 여기서 더 나아가 함수선언, 조건문, 반복문 등 프로그래밍 코드까지 반응성(reactive) 기능을 사용할 수 있게 합니다.

다음 예제 코드를 보면 $: 를 사용함으로써 데이터 뿐만이 아니라 일반 프로그래밍 코드에서 반응성(reactive)를 적용할 수 있는 것을 확인 할 수 있습니다.

<script>let firstName = "Jeremy";let lastName = "Go";$: fullName = firstName + " " + lastName;$: console.log(`the firstName is ${firstName}, the lastName is ${lastName}.`);</script><input type="text" bind:value={firstName} /><input type="text" bind:value={lastName} /><p>{fullName}</p>

Svelte란?

Svelte의 장점

Write less code

No virtual DOM

Truly reactive

Written by Seungwon Go