[Svelte] 스벨트 개념

thyoondev·2021년 7월 24일
2

Svelte

목록 보기
1/2
post-thumbnail

스벨트 공식 페이지
HEROPY님의 Svelte.js [Core API] 완벽 가이드

Svelte란

  1. Svelte(스벨트)는 Rich Harris가 제작한 새로운 접근 방식을 가지는 프론트엔드 프레임워크입니다.
  2. Svelte는 자신을 ‘프레임워크가 없는 프레임워크’ 혹은 ‘컴파일러’라고 소개합니다.
    이는 Virtual(가상) DOM이 없고, Runtime(런타임)에 로드할 프레임워크가 없음을 의미합니다.
  3. 기본적으로 빌드 단계에서 구성 요소를 컴파일하는 도구이므로 페이지에 단일 번들(bundle.js)을 로드하여 앱을 렌더링할 수 있습니다.

특징

간결한 코드

  • 높은 가독성 유지
  • 개발 시간 단축
  • 쉬운 리팩토링
  • 쉬운 디버깅
  • 더 작은 번들 (SPA최적화)
  • 낮은 러닝 커브

Svelte와 React의 코드 비교

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

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

No virtual DOM

Svelte는 가상돔을 사용하지 않는다.
새로운 Virtual DOM을 이전 Snapshot과 비교하거나(Diffing), 상태 변화에 따른 새로운 가상 요소 생성 등에 많은 오버헤드가 있을 수 있으며 최종적으론 실제 DOM을 업데이트해야 하므로 그 과정을 생략하는 것이 더욱 빠를 수 있다고 합니다.

반응성

  • Framework-less VanillaJS
  • Only devDependencies
  • 명시적 설계(창의적 작업)

반응성은 변경된 값이 DOM에 자동으로 반영됨을 의미합니다.
Svelte는 별도의 Setter 없이 값의 할당(assignments)만으로 업데이트를 트리거(Trigger)할 수 있습니다.

단점..

  • 낮은 성숙도(작은 생태계)
  • CDN 미제공
  • IE 지원x
profile
Practice and repeat

0개의 댓글