- Svelte의 '파일당 단일 컴포넌트' 제약은 룬, 스토어, 클래스 조합으로 크게 완화됩니다. 🧩
- 현대 Svelte 개발(SPA, SSR)에는 SvelteKit 사용이 강력히 권장됩니다. 🚀
- Svelte 5는
$state,$effect,$derived같은 강력한 룬을 도입하여 반응성을 처리합니다. ✨ - 룬은
.svelte파일의 스크립트 태그뿐만 아니라.ts파일에서 스토어를 생성하는 데도 사용될 수 있습니다. 📝 .ts파일 내 클래스는 복잡한 로직(D3, 백엔드 데이터 페칭 등)을 캡슐화하고 룬을 사용하여 반응형 상태를 관리할 수 있게 합니다. 📦- 이를 통해
.svelte컴포넌트에서 로직을 분리하여 더 깔끔하고 모듈화된 코드를 작성할 수 있습니다. 🏗️ - 컴포넌트 스크립트 내에서 클래스 인스턴스를 초기화하면 해당 컴포넌트에만 국한된 로컬 반응형 상태를 생성합니다. 🏠
- 여러 컴포넌트(페이지, 레이아웃 등) 간에 상태를 공유하려면, 클래스 인스턴스를 스토어로 만들고 Svelte의 컨텍스트 API(
setContext,getContext)를 통해 관리해야 합니다. 🤝 - 컨텍스트는 키를 기반으로 작동하여 동일한 유형의 스토어를 여러 개 독립적으로 생성할 수 있습니다. 🔑
- 서버 사이드 렌더링(SSR) 환경에서 상태를 공유할 때는 컨텍스트를 사용하여 데이터 누수 문제를 방지하는 것이 필수적입니다. ⚠️
- 이 접근 방식은 기존
readable/writable스토어보다 훨씬 풍부하고 인체공학적인 상태 관리 방법을 제공하며, React의 Context API보다 사용하기 편리합니다. 👍 - 채팅 앱, 전역 카운터, 전역 토스트 알림 등 다양한 복잡한 애플리케이션 로직에 효과적으로 적용할 수 있습니다. 💡
- 이 새로운 멘탈 모델을 이해하면 Svelte 개발이 훨씬 즐거워지고 다른 프레임워크로 돌아가기 어려울 정도로 강력합니다. 🧠
Recommanded Videos
