[Svelte] Svelte란?

스벨트란?

스벨트는 2016년 출시된 오픈소스 프론트엔드 프레임워크 입니다. 스벨트는 Vue, React와 동일한 기능을 가진 코드를 작성하였을 때 가장 적은양의 코드라인으로 작성이 가능하며, 가상돔 (Virtual Dom)을 사용하지 않는다는 특징이 있습니다.

 

* 동일 로직 비교

// 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, setA] = 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>

가상돔 (Virtual Dom)? 

 - Vue, React에서는 무거운 Dom 전체를 조작하는 부분의 성능향상을 목적으로 가상의 Dom을 생성하여, 실제 Dom에 접근하지 않고 실제 돔을 추상화한 자바스크립트 객체를 구성하고, 변경사항 발생 시 메모리에 저장 된 Dom의 상태와 비교 한 뒤 최소한의 내용만 반영합니다. 

 

스벨트의 Reactive

- 가상돔의 Reactive는 실제 Dom의 반영된다고 볼수 없기에 스벨트는 '진짜' Reative라고 설명합니다.

- 스벨트는 스스로를 프레임워크가 아닌 컴파일러로 소개합니다. 가상돔은 브라우저에서 동작되지만 스벨트의 경우 Build 시점에 javascript, html, css를 생성하기 때문에 기존의 바닐라 자바스크립트와 동일하게 동작됩니다.

- 다시 말하면 View의 동기화를 위한 작업이 런타임에 일어나는게 아닌 컴파일러로써 빌드시점에 정해지며 동기화 로직이 작성됩니다.

 

 

 

참고사이트

https://s-core.co.kr/insight/view/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EC%82%AC%EB%9E%91%ED%95%98%EB%8A%94-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%8A%A4%EB%B2%A8%ED%8A%B8svelt/

https://beomy.github.io/tech/svelte/vue-vs-svelte/

https://mycodings.fly.dev/blog/2022-12-17-compare-svelte-react-vue