Svelte/SvelteKit 리액트와의 차이는?

정지현·2023년 3월 16일

Svelte가 그렇게 간단한 사이트 만드는데 좋다던데...

SvelteKit으로 풀스택도 지원한다던데 이참에 한번 해보기로 했다. 괜찮으면 포트폴리오를 다시 쓰는것도 좋은 생각인것 같음.

먼저 가장 친숙한 react와의 비교를 해보아야 하겠다.

  1. 템플릿 언어: React에서 JSX 문법을 사용해 render 부분을 적는다면, Svelte는 자체 template을 작성하고, 이것을 빌드타임에 바닐라 자바스크립트로 컴파일해 속도가 더 빠르다고 한다.

  2. 번들 사이즈: React는 프레임워크 자체의 크기(23kb였나..?)로 번들 사이즈가 크지만, svelte는 자체 컴파일러로 인해서 번들 사이즈를 줄이고 로딩 시간을 줄일 수 있다.

  3. 반응성: 리액트는 유명한 가상 돔 기술을 사용해 state의 변화 -> diffing -> tree rendering 순서대로 진행한다.
    Svelte에서는 reactive programming을 사용한다고 하는데, 이것은 튜토리얼을 진행하면서 더 배울 기회가 있을 것이다.

https://velog.io/@jihyeonjeong11/useReducer-vs-useState-2-1.-React-fiber
// fiber의 경우
  1. 러닝커브: 더 짧은 코드를 지향하는 만큼 Svelte가 더 쉽다고 알고 있다.

  2. 퍼포먼스: 이것 역시 Svelte가 더 낫다고 홍보하고 있는 부분이다.

  3. 커뮤니티: 이거는 비교하는게 실례가 아닐까... react를 따라갈 수 있는 ui 라이브러리는 존재하지 않을 듯 하다.

다음에는 실제로 https://svelte.dev/tutorial/basics 의 예제들을 작성해 보도록 해야겠다.

profile
Can an old dog learn new tricks?

0개의 댓글