Svelte 소개

 

Vue보도 조금 늦게 나온 프론트엔드 프레임워크.
2019년 3버전이 나온 이후 관심을 받음

"Frameworks without the framework"?

Svelte의 장점

Write less code

Svelte의 상태값은 특별한 규칙을 만들기보다 자바스크립트 변수 선언을 하는 것이 전부

 

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>
	);
};

Vuejs 코드

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

 

No virtual DOM

가상돔이 유용하지만 가상돔 없이 그것과 같은 성능을 낼 수 있다면 이 개념이 필요할까?

Svelte가 React, Vue와 가장 다른 부분은 컴파일(Comlipe) 이라는 개념

 

Svelte를 프레임워크라고 소개하지 않고, 구성요소들을 최적화된 자바스크립트로 변환하는 컴파일러라고 소개

 

React, Vue는 런타임 대응을 위해 기본적으로 엔진을 블디에 포함해야만 하지만

Svelte는 컴파일 시 대부분을 자바스크립트로 만들기 때문에 굳이 엔진을 포함 X

때문에 최종 결과물이 작다

 

Truly reactive

Svelte는 반응성을 굉장히 쉽게 개발할 수 있게 설계

 

클릭시 count를 증가하는 예제 코드

<script>
let count = 0;
$: double = count * 2;
const handleClick = () => count = count + 1;
</script>

<button on:click={handleClick}>
	count: {count}
</button>
<P>count*2: {double}</p>

$:로 정의된 반응성 함수는 일반적인 상태값과 다르게 호출 없이 알아서 작동

일종의 센서와 같은 역할을 하는 기호

기호 하나만으로 자동으로 반응하는 선언 형식의 기능 구현의 장점

 

---

references

1. https://svelte.dev

2.스벨트로 시작하는 웹 프런트엔드 책