티스토리 서식 에러 때문에 벨로그 에서 보시는 걸 강력히 추천드립니다.
- 2024년 10월 20일 스벨트 5가 드디어 출시 되었습니다.
- 읽어볼만한 마테리얼을 모아보고 간단히 요약하려고 합니다. 이 요약은 11월 20일까지 하루에 한번 정도 업데이트가 될 예정입니다.
Svelte 5 is alive
- 공식 블로그
- 스벨트 역사상 가장 큰 변화
- 🤦🏻기존 스벨트의 문제점
- 컴파일러로만 확인하는 반응성이 시그널에 기반한 fine-grained reactivity 보다 안 좋음
- sloted content 와 이벤트 핸들러를 컴포넌트에 전달되는 prop과 별개로 취급
- web component 에 맞춘 설계
$:
은 멋진 트릭이나, 파생 상태(derived state)와 부가 효과(Side effect)를 같이 취급함- 컴파일 타임에서 종속성 계산이 복잡해지게 됨.
- 🆕 스벨트 5의 변경 사항
- Rune: 반응적 상태를 표현. 함수나 객체 같은 게 아니라 값임.
let count = $state(0);
- 재사용성이 높음(
.svelte.js
,svelte.ts
,.svelte
파일 사용 가능)
- 재사용성이 높음(
- 이벤트 핸들러는 이제 그냥 prop임.
slot
메커니즘은 이제{#snippet}
으로 대체됨.let:
과<svelte:fragment>
도 제거.
- Rune: 반응적 상태를 표현. 함수나 객체 같은 게 아니라 값임.
- ⬆️ 업그레이드 하기
- 스벨트 4 코드가 호환되므로, 업그레이드 바로 가능
- 컴포넌트 업데이트
- VS Code 확장 기능의 'Migrate Component to Svelte 5 Syntax' 사용
- 자세한 내용은 Svelte 5 migration guide 가이드 참고
npx sv migrate svelte-5
로 바로 업데이트 가능
- 🛠 새로운 CLI 도구, sv 출시
사이트 통합
- svelte.dev 아래에 있던 사이트들이 통합되었습니다.
- 🤦🏻 기존 사이트의 문제점
- 사이트 간 검색 불가
- 사이트 별 네비게이션 차이
- 사이트간 설정 공유 불가
- 외부 링크가 깨져 있을 수 있음.
- 디자인 업데이트
- 폰트 업데이트
- 오픈 소스
Svelte 5 migration guide
- 4 → 5 공식 가이드
- 스크립트로 마이그레이션 하기 :
npx sv migrate svelte-5
-svelte/legacy
에 있는 함수를 사용하는 식으로 변환되는 경우도 있습니다. (이펙트 및 이벤트 관련)createEventDispatcher
,beforeUpdate/afterUpdate
은 자동 변황 되지 않습니다.
- 변경사항에 대한 상세 내용을 알고 싶으면 각 항목의 Why we did this 를 보면 됩니다.
- 반응성 표현:
let
→$state
<script>
let count = $state(0);
</script>
- 파생상태:
$:
→$derived
<script>
let count = $state(0);
const double = $derived(count * 2);
</script>
- 부수 효과:
$:
→$effect()
- 이제 부수효과는 콜백 함수를 이용합니다.
<script>
let count = $state(0);
$effect(() => {
if (count > 5) {
alert('Count is too high!');
}
})
</script>
- 컴포넌트 프로퍼티:
export let
→$props
<script>
let { optional = 'unset', required } = $props();
</script>
- 이벤트 리스터:
:
을 지우세요.- 이제 이벤트 리스터는 프로퍼티입니다.
<button onclick={() => count++}>
clicks: {count}
</button>
<button {onclick}>
clicks: {count}
</button>
- 컴포넌트 이벤트: 콜백 함수를 prop으로 넣으세요.
<Pump
inflate={(power) => {
// blahblah
}}
/>
<!-- Pump.svelte -->
<script>
let { inflate, deflate } = $props();
</script>
<button onclick={() => inflate(power)}>
inflate
</button>
- 이벤트 버블링: 요소에 명시적으로
on:click
을 넣는 대신에, 콜백 프롭을 받게 변경되었습니다.<script> let props = $props(); </script>
<button {...props}>
click me
- 이벤트 모디파이어: `capture` , `passive`, `nonpassive` 세 모디파이어가 존재합니다.
- 다중 이벤트 핸들러: 이제 같은 이벤트에 여러 개의 핸들러를 주지 못합니다. 다음과 같은 형태로 작성하세요.
```jsx
<button
onclick={(e) => {
one(e);
two(e);
}}
>
...
</button>
Snippet: Slot을 대체하기 위한 기능
기본 컨텐트:
<slot />
→{@render children?.()}
<script> let { children } = $props(); </script>
{@render children?.()}
- 여러 컨텐트 다루기: named slot → `{@render ...}`
```jsx
<script>
let { header, main } = $props();
</script>
<header>
{@render header()}
</header>
<main>
{@render main()}
</main>
- 데이터 다시 전달하기:
let:
→ 스니펫으로 처리
<script>
import List from './List.svelte';
</script>
<List items={['one', 'two', 'three']}>
{#snippet item(text)}
<span>{text}</span>
{/snippet}
{#snippet empty()}
<span>No items yet</span>
{/snippet}
</List>
<script>
let { items, item, empty } = $props();
</script>
{#if items.length}
<ul>
{#each items as entry}
<li>
<slot item={entry} />
{@render item(entry)}
</li>
{/each}
</ul>
{:else}
<slot name="empty" />
{@render empty?.()}
{/if}
- 컴포넌트는 더 이상 클래스가 아닙니다. :
bind:this
도 이제 클래스를 반환하지 않아요. - 서버 API 변경 사항: 이제
App.render()
대신render(App, ...)
형식입니다. Component
타입이 도입되었습니다.- (작성중)
:is()
와:where()
은 이제 스코프로 적용됩니다.- 이 외에도 변경사항이 있습니다.
sv, 새로운 스벨트 CLI 툴
문서화 되어있지 않은 변경사항
버그 및 호환성
- 초기 버전이라 버그 및 업데이트 많습니다.
사용 불가능한 라이브러리
사파리 버그
- 리차드 해리스의 트위터에 따르면 현재 사파리에서만 발생하는 버그를 해결 중이라 합니다.
- (작성 중)
Hackernews 반응
그외 읽어볼만한 자료
- 세분화된 반응성: fine-grained reactivty에 대한 설명입니다.
사담
스벨트 봄은 온다.
'개발' 카테고리의 다른 글
[번역]Svelte의 원리 (0) | 2024.01.05 |
---|---|
옵시디언을 잘 써보기 (0) | 2023.02.03 |
giscus: Github Discussion을 이용하여 댓글을 달아보자. (0) | 2021.11.16 |
프로젝트 회고록: gh-pages와 Github Pages 커스텀 도메인 설정 및 삽질기 (0) | 2021.11.15 |