[Svelte] Svelte란 무엇인가

Svelte 란?

 

• 컴파일러 기반 프레임워크
  • 리액트나 뷰는 브라우저에서 자바스크립트로 동작하는 런타임 프레임워크로 실제 실행 시점에서 Virtual DOM을 생성함
  • 그에 반해 Svelte는 코드를 작성할 때 컴파일러가 미리 최적화된 바닐라 자바스크립트 코드로 변환함
• 결과적으로 Svelte는 렌더링 속도가 빠름

 

구조와 문법

 

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<style>
  button {
    font-size: 18px;
  }
</style>

<h1>Count: {count}</h1>
<button on:click={increment}>+</button>

 

• <script> 영역 : 컴포넌트 로직
• <style> 영역 : 컴포넌트 전용 CSS (자동으로 범위 한정됨, scoped 처리)
• 마크업 영역 : 실제 DOM 구조 (HTML + Svelte 문법)

 

반응형(Reactivity) 문법

• Svelte의 가장 큰 장점은 간단한 '반응형' 문법

// 기본 반응성

let count = 0;

function increment() {
  count += 1; // count 값이 바뀌면 UI 자동 갱신
}

 

• setState() 같은 별도 함수가 필요없음, 변수를 재할당하면 자동으로 UI가 업데이트 됨

// 반응형 선언문 ($:)

let a = 1;
let b = 2;

$: sum = a + b; // a나 b가 바뀌면 sum도 자동 업데이트

 

 

데이터 전달 (Props)

• 컴포넌트 간 데이터 전달도 간단함

• 부모 -> 자식

<!-- Parent.svelte -->
<Child name="홍길동" />

<!-- Child.svelte -->
<script>
  export let name;
</script>

<p>안녕하세요, {name}님!</p>

 

 

상태관리

• 프로젝트 규모가 커질 경우 Svelte store를 사용

// store.js
import { writable } from 'svelte/store';
export const count = writable(0);

<!-- App.svelte -->
<script>
  import { count } from './store.js';
</script>

<h1>{$count}</h1>
<button on:click={() => $count += 1}>+</button>

 

--> $count 문법으로 store의 값을 자동으로 구독/갱신

 

 

Svelte의 장점

• Virtual DOM 없어서 빠른 랜더링이 가능함
• 코드량이 적고 간결함
• CSS가 자동으로 컴포넌트 범위에 한정됨
• 빌드 후 실행파일이 가벼움

 

Svelte의 단점

• 생태계가 리액트나 뷰에 비해서 작아서 기업 지원 도구가 상대적으로 적음

(스벨트가 가볍고 랜더링이 빨라서 좋긴한데 개인적인 의견으로는 굳이 리액트나 뷰 두고 쓸 필요는 없는 것 같다.)

• 일부 외부 라이브러리 호환성 부족