"Svelte for the Experienced React Dev" 글의 내용이 좋아서 공감가는 부분을 뽑아 봤다. 가감한 부분이 있어서 보다 자세한 내용은 원글을 보는 것이 좋다.

• 표준 CSS 구문으로 스타일을 지정할 수 있고 컴포넌트 범위로 스코프가 설정된다.
• 컴포넌트가 랜더될 때 마다 다시 실행되지 않고 한번만 실행되기 떄문에 메모이즈나 업데이트 조건 제어 같은 추가 코드가 필요 없다.
• 상태변경에 따른 실행이 필요할 경우 리액티브 구문(reactive statement)을 추가해서 사용할 수 있다.
• 하나의 컴포넌트에 <></>같은 특수 구문없이 여러개의 요소를 형제 노드로 넣을 수 있다.
• 간단하게 사용할 수 있는 자체 스토어를 제공한다. 리액트의 스토어들은 선택권은 넓은데 하나같이 너무 과하다.
• 컴포넌트 변수 2-way 바인딩을 지원한다. 소개 글에는 없지만 상위 컴포넌트로 이벤트도 발생시킬 수 있다.
• DOM 작업에는 use:action을 사용한다. 소개 글에는 없지만 bind:this로 DOM 노드를 가져와서 DOM 스크립팅을 할 수도 있다.
• 다양한 폼 요소 바인딩을 지원하고 리액트보다 더 브라우저 기본 스펙에 가깝다.
• 애니메이션 기능을 제공한다. 개인적으로는 CSS로 구현하는 것을 더 선호해서 사용하지는 않지만 동적인 애니메이션에 유용하게 사용될 것 같다.
• 컴포넌트에 동적인 콘텐츠를 넣을 때는 slot을 사용한다.
• 이건 몰랐던 건데 스벨트 컴포넌트를 웹 컴포넌트(web component)로 빌드하는 기능이 있다고 한다.

스벨트에서 제공하는 스타일 기능도 상당히 좋은데 "What I Like About Writing Styles with Svelte"에 잘 소개되어 있다. 컴포넌트 범위로 스코프가 되기 때문에 타입 셀렉터도 부담없이 사용가능하고 코드도 간단해진다. 테일윈드(Tailwind)나 불마(Bulma) 같은 유틸리티 CSS를 사용할때는 절대 느낄 수 없는 부분이다. SMACSS 같은 불필요한 제약 사항이나 BEM같은 HTML을 읽기 어렵게 만드는 명명법에서도 벗어날 수 있다.

다 이해하지는 못했지만 "이제 React.js 를 버릴 때가 왔다"는 글도 생각해볼 거리를 던저준다. 글의 세부 내용은 약간 논란이 있었지만 채용 시장에서 볼 수 있는 모든 프론트 엔드 이력서가 리액트인 현실에서 큰 방향은 고민해 봐야 한다고 생각한다.

그동안 리액트 개발 경험이 너무 오버 엔지니어링이라고 생각했지만 대놓고 말하기 껄끄러웠는데 같은 말을 하는 트윗을 발견했다. 내용은 넥스트를 스벨트킷으로 전환하는 내용인데 나는 앞부분만 봤다.

Q: What does it feel like for someone with an extreme amount of React experience when they learn Svelte?

A: “I feel like I’m waking up from an over-engineered hell.”

스벨트의 가장 큰 장점은 배우기 쉽다는 점이다. 리액트나 뷰에 대한 경험이 없어도 원래 웹개발을 하던 사람이면 오히려 더 쉽게 업무에 활용할 수 있을 것이다.