서론
개발자로서 첫 일이 생겼다.
문제는 그 일이 한번도 사용해본 적 없는 스벨트라는 친구를 사용해야 한다는 것이었다...
혹시 스벨트 써보셨나요?
/ 네? 아니요...?(스벨트가 뭐지)
아... 한번 찾아보셔요... 제가 리액트를 별로 선호하지 않습니다. 스벨트로 진행할거에요!
지금 생각해보니 이런걸 믿고 일을 맡겨주신 PM님에게 무한 감사를 해야할듯...?
그런데 궁금한 점... 왜 제 주위 백엔드 개발자들은 리액트를 싫어하실까요?
특유의 복잡한 문법 때문일까요?
스벨트가 뭔데요?
svelte는 영어사전에 검색하면 요런 뜻을 가지고 있다고 한다.
'날씬함'을 강조한 이름에서 느낄수 있듯이, 가벼움을 전면 컨셉으로 내세우며 나온 프레임워크다.
이 한 단어로 스벨트의 거의 모든게 설명 가능하다.
본론
리액트와 무엇이 다른가
현 시점 부동의 1티어(기준: 채용공고) 리액트와 비교하자면, 요런 점들이 달랐다.
소규모 프로젝트 & 배우는 입장에서 작성되어 실제 현업에서 크게 활용하시는 분들과는 관점이 다를 수 있습니다.
가상DOM을 사용하지 않음
리액트에서는 실행시점에 가상DOM과 실제DOM을 비교해 바뀐 부분만 쇽 바꿔넣는다.
그러나 스벨트에서는 가상DOM을 사용하지 않고, 빌드시점에 소스코드를 분석해 최적화된 바닐라 자바스크립트 코드로 바꿔넣는다.
이건 성능 관점에서 가장 큰 차이가 있겠지만, 실제 사용하는 입장에서는 DOM 조작이 편리해졌다는 점이 가장 크게 와닿는다.
리액트에서는 DOM 조작을 위해 useRef 등을 사용해야 해서 꽤나 번거로웠지만, 스벨트에서는 기존 바닐라 자바스크립트에서 사용하던것과 큰 차이 없이 document.querySelector 등을 사용할 수 있다.
⭐간결한 문법
import { useState } from 'react';
import { Child } from './Child';
const Parents = (): JSX.Element => {
const [favoriteFood, setFavoriteFood] = useState('월남쌈');
return <Child parentsFavoriteFood={favoriteFood}></Child>;
};
----------------------------------------------------------------
export const Child = (props: { parentsFavoriteFood: string }) => {
const { parentsFavoriteFood } = props;
return <div>{parentsFavoriteFood}</div>;
};이 코드를, 스벨트에서는 더 간결하게 작성할 수 있다.
<script lang="ts">
import Child from './Child.svelte';
let favoriteFood: string = '월남쌈';
</script>
<Child {favoriteFood}></Child>
----------------------------------------------------------------
<script lang="ts">
export let favoriteFood: string;
</script>
<div>{favoriteFood}</div>당장 보이는 큰 차이점을 짚자면,
- 자식 컴포넌트를 export 하지 않더라도 스벨트가 알아서 인식할 수 있다
- props를 넘겨줄때 딱히 명명하지 않고, 받아올때도 그저 export만 붙여 간편히 받아온다.
- state 변수를 관리할때, set함수를 쓸 필요 없이 재할당/선언이 가능하다. (let 사용 필수)
자바스크립트의 let을 let답게, const를 const답게 쓸 수 있다는 점이 정말정말 좋다.
이 예제 외에도 input 등의 바인딩이 정말 편리한데, 더 쓰자면 너무 길어지니 스벨트 공식문서의 예제 보고 오시라.
리액트와 다른 환상적인 편리함을 느낄 수 있다. 코드 길이 줄어듦, 가독성은 말할것도 없고
솔직히 리액트에서 onChange 등으로 변수 받아오며 생기는 쓸데없이 많은 렌더링(에서 파생되는 문제들)을 너무 싫어했어서 스벨트가 더 좋은걸지도.
(참고로 그런 문제를 위해 react-hook-form이라는 멋진 라이브러리가 있습니다. 근데 스벨트는 라이브러리 필요없는데?)
아무튼 간결한 문법이야말로 배워야할것이 많은 지친 개발자들에게 한줄기 빛 아닐까 싶기도 합니다.
진정한 리액트(reactive)
리액트에선 업데이트를 관리하기 위해 useEffect를 사용했다.
솔직히, 어떻게 저떻게든 동작하게 하자면 가능하지만 깔끔하게 코드 짜기가 정말 힘들다.
한 컴포넌트에 useEffect를 하나만 쓰는게 권장되고, 나는 변수별로 동작을 따로 관리하고 싶은데...
그러다보면 useEffect 안에는 별 상관도 없는 코드들이 같이 엉겨있게 되고, deps 배열에도 결국 그냥 모든 state 다 들어가게 되더라...
스벨트에서는 $를 사용해 고런 상태값들을 깔끔하게 관리할 수 있다. (공식 예제)
the
$:means 're-run whenever these values change'
$를 붙여서 관리하는 함수/변수들은 의존하는 상태값들이 변경되면 무조건 re-run 된다는 것이다!
정말 간편하지 않나요? 예????
단점이 뭔가요
작고 소중한 생태계
세계 일짱 프론트 프레임워크 리액트의 n년간의 미친듯한 독주덕에...
우리의 따봉벨트는 여전히 작고 소중한 점유율을 자랑합니다.
스택오버플로우 2023년도 설문조사에서 죠오오오기 밑에 있는 모습을 보여주는데 조금씩 올라오긴 하지만 이 모습이 n년째🥲...
작고 소중한 생태계 덕에 레퍼런스가 매우 적다...
무언가 뜻대로 되지 않을때, 스벨트는 한번 검색해보고 안 나오면 검색을 더 해보는것보다 스스로 해결하는 편이 훨씬 빨랐다(...)
자기주도적 학습이 되었다 치면 또 장점이 될수도 있겠다...
그리고 작고 소중한... 채용공고
라고 농담반 진담반으로 타이핑을 했는데 해외 웹에서도 똑같은 소리를 하고 있네...
대규모 프로젝트에 적합하지 않음
처음엔 이게 뭔소린가 했는데, 이 포스팅을 하면서 국내/해외 웹을 싹 돌며 스벨트에 대한 반응들을 보니 알것 같기도 하다.
대기업을 등에 업고, 노련하고 경험많은 프레임워크들과 달리 스벨트는 아직 역사가 짧고 부족한 모습을 많이 보인다.
그리고 커뮤니티가 작다보니 개발자 경험(Developer Experience) 면에서 점수를 다 깎아먹는 듯 하다.
한정된 라이브러리나 문서화의 어려움 등이 가장 많은 단점으로 꼽히는듯 했다.
확실히 이제 시작한 내 단계와 실제 대규모 실무에서 쓰는 사람들의 입장이 많이 다르구나 또 느낄수 있었다.
웹소켓 사용이 어렵다는 댓글도 봤는데, 이건 당장 확인할수가 없어 보류. 해보고 싶은데 이렇게 하고싶은것만 잔뜩 늘어간다😂
결론
세상에 완벽한 무언가는 없듯이, 완벽한 프레임워크라는것도 사실 존재하지 않겠지
단지 리액트만이 정답이 아니라는걸 언젠가는 알았어야 하고, 갑자기 내 인생에 나타난 따봉벨트 덕에 그 사실을 조금 더 일찍 알았다는것이 참으로 흡족하다.
그러니 신나게 외쳐본다. 고맙다 따봉 스벨트야!
