Svelte 란?

Framework 가 아닌 Compiler 이다

스벨트는 실행시점이 아닌 컴파일 시점에서 모든 코드를 single vanilla javascript 번들로 컴파일 한다.

기존의 React 와 같은 프레임워크 라이브러리들은 Webpack 이나 Babel 등을 호출하여 프로젝트 파일을 번들하고, React와 React-dom 라이브러리 또한 번들에 포함한다.

반면에 Svelte는 컴파일러이기 때문에, 자체적으로 컴포넌트를 컴파일한다. 또한 Rollup의 트리 쉐이킹을 활용하여 실제 코드에서 사용되는 부분만 번들링한다.

즉, Svelte로 만든 앱은 빌드 후 단 하나의 자바스크립트 파일이 생성되어 ,이파일 하나 만 배포하면 되고 Svelte 라이브러리는 배포할 필요가 없다. 그래서 Svelte의 결과물은 Runnging이 매우 빠르다.

No Virtual DOM

리액트는 DOM을 변경하기 위해 다음과 같은 3가지 과정을 거친다

1. 기존 스냅샷과 새로운 스냅샷은 동일한 div를 가지고 있을 것이다.
2. 기존 div의 모든 attribute를 새로운 div와 비교하여 하나라도 변경된 것이 있는지 확인한다. (이 경우에는 className이라는 attribute만 존재하며 변경되지 않았다.)
3. 자식 요소들을 모두 비교한 후 text 요소만 변경된 것을 확인하여 실제 DOM을 업데이트한다.

하지만 여기서 의미있는 작업은 3번뿐이다. 3번만 실행하는 것이 바로 Svelte이다.

즉, Svelte는 실제 DOM에 변경 사항을 적용하기 전에 diff를 비교하고 컴포넌트를 그리기 위한 시간을 소비하는 과정을 모두 생략하고 바로 실제 DOM을 변경한다. 또한 어떤 요소에 변화가 일어나는 지 알고 있기 때문에 빠르게 타겟 요소만 변경할 수 있다.