실전 스벨트 & 스벨트킷 입문 리뷰

도서/IT 도서

실전 스벨트 & 스벨트킷 입문 리뷰

Chipmunks 2024. 5. 15. 13:39

728x90

안녕하세요, 다람쥐입니다.

이번에 소개드릴 도서는 '실전 스벨트 & 스벨트킷 입문' 입니다.

스벨트는 들어봤는데, 스벨트킷은 처음 들어봤어요.

React 프레임워크 중 Next.js 와 비슷한 역할을 하는 걸로 보였어요.

라우팅, 데이터 로딩, 폼 액션, 페이지 렌더링(SSR 등), 상태 관리를 코어 컨셉으로 가져가고

Static Build, SPA(Single Page Application) 등의 빌드 방법과 Vercel, Netlify 으로 배포까지 도와주는 프레임워크더라고요.

스벨트를 도입할 때 스벨트킷 프레임워크도 고려해보면 좋을 것 같네요.

책 구성은 아래와 같아요!

초반부엔 스벨트를 설명합니다.

스벨트 문법과 컴포넌트로 나누는 법, 바인딩, 스토어를 설명합니다.

그리고 콘텍스트, 트랜지션 / 애니메이션 같은 고급 문법을 따로 설명합니다.

스벨트는 가상 DOM을 사용하지 않아 DOM에 바로 접근하게 됩니다.

값을 바인딩하면, 값이 '할당'되는 순간에 업데이트가 된다는 점이 신기했어요.

객체를 할당하고 객체 속성에 접근해서 바꾼다한들, 업데이트가 이뤄지지 않는데요.

예를 들어, [] 배열에 push를 해도 상태 변경이 이뤄지지 않습니다.

아래처럼 stars 에 재할당할 시, 스벨트에서 빌드 시 '할당'을 인식해 이 지점을 업데이트 지점으로 인식하게 됩니다.

'할당'으로 한 이유가 업데이트 시점을 직관적으로 이해하기 쉽게 하기 위함이라고 합니다.

한 컴포넌트의 값이 '할당'이 일어나면, 렌더링이 되는 포인트구나! 를 쉽게 알 수 있더라고요.

<script>

    let n = 1;
    let stars;
    
    $: {
    	const newStars = [];
        for (let i = 0; i < n; i++) {
        	newStars.push(i % 2 === 0 ? "*" : '');
        }
        stars = newStars;
    }

</script>

<div>
    {#each stars as star}{star}{/each}
</div>
<div>
    <button on:click={() => (n = n - 1)} disabled={n <= 1}>
    	별 제거하기
    </button>
	<button on:click={() => (n = n + 1)}>
    	별 추가하기
    </button>
</div>

또 스토어가 생소했어요.

writable 스토어, readable 스토어, derived 스토어, custom 스토어가 있습니다.

스벨트 컴포넌트는 변수를 사용해 상태를 관리하지만, 단일 컴포넌트 내에서만 사용이 가능한데요.

여러 컴포넌트 상태를 공유하기 위해 스토어를 사용합니다.

값을 구독 / 해지하는 기법을 사용합니다.

스토어 값이 변경되는 순간, 구독하는 모든 컴포넌트에 신호를 전달합니다.

각 컴포넌트는 변경된 값을 다시 컴포넌트 변수에 '할당'하게 되는거죠.

'할당'이 일어났으니 렌더링 되고요~