FrontEnd/Svelte
[Svelte] Svelte란?
js-web
2024. 1. 23. 17:43
반응형
스벨트란?
스벨트는 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://beomy.github.io/tech/svelte/vue-vs-svelte/
https://mycodings.fly.dev/blog/2022-12-17-compare-svelte-react-vue
반응형