스벨트는 컴파일되기 때문에 꼭 필요한 코드만 번들에 넣습니다. 리액트같은 경우엔 프레임워크에 필요한 여러 기본적인 코드들이 다같이 들어갑니다. 그래서 같은 앱이라고 한다면
스벨트로 만든 앱은 9.7KB
뷰는 41.8KB
리액트+리덕스는 193 KB
라고 합니다. (Conduit라는 앱을 만들고 비교하였습니다.)
이것만 보아도 스벨트는 정말 작죠?
2. 코드를 적게 사용합니다.
이건 스벨트를 배울때부터 알 수 있습니다. 한마디로 스벨트만을 위한 코드가 거의 없다고 보면 됩니다. 리액트 같은 경우에 (제 기준) 쓸데없이 기본적으로 써야하는 코드들이 많습니다. 스벨트는 그런것들을 다 제외시키고 정말 필요한 코드만 작성하게 되어있습니다.
위에서 언급한 앱의 코드를 비교해보면
스벨트는 1,116줄
뷰는 2,076줄
리액트+리덕스는 2,050줄
입니다.
반정도 적은걸 알 수 있습니다.
3. 가상 DOM 없이 반응성을 제공합니다. 그래서 더 빠릅니다.
리액트는 가상DOM을 사용하여 가상DOM과 실제DOM을 계속해서 비교하고 달라진 부분만 업데이트 하는 식으로 웹페이지가 구성됩니다. 스벨트는 가상DOM을 사용하지 않고 상태를 업데이트 할 수 있습니다.
이 외에도
스벨트가 가장 메모리를 덜 차지하고,
컴포넌트 생성이 매우 쉽습니다. (컴포넌트를 만들 때 필요한 기본적인 코드가 거의 없습니다. 클래스 등의 개념조차 필요하지 않습니다.)
상태관리가 정말 간편하며, 애니메이션도 손쉽게 만들 수 있습니다.
이 이유만으로도 Svelte를 사용하는 이유가 충분하지 않나요?
얼른 스벨트가 유명해져서 저도 더 몸값이 높은 개발자가 되고 싶습니다.
스벨트 앤 새퍼 인 액션은
위의 내용을 다 아우르면서
컴포넌트를 어떻게 정의하는지,
블록 구조 ({#if}, {#each} 등 ), 컴포넌트간의 통신, 스토어 (상태관리), 애니메이션, 라우팅, 디버깅, 테스팅 및 배포까지 다룹니다.
그리고 스벨트 기반 프레임워크인 새퍼까지 다루게 됩니다.
그래서 Svelte and Sapper in action을 참고하여
청첩장을 Svelte로 만들어 보았습니다!
Component 예시