1. Introduction (소개)
- component: HTML, CSS, JavaScript를 .svelte 파일에 캡슐화
- dynamic attributes: {변수명} 문법으로 속성값 동적 할당
- styling: 컴포넌트별로 CSS가 격리됨
- nested components: import로 컴포넌트를 가져와서 사용
2. Reactivity (반응성)
🔄 State ($state)
sveltelet count = $state(0); // 반응형 상태
값이 변경되면 자동으로 UI 업데이트
깊은 반응성: 객체/배열 내부 변경도 감지
⚡ Derived State ($derived)
let total = $derived(numbers.reduce((a, b) => a + b, 0));
다른 상태에 의존하는 계산된 값
의존성 변경시 자동 재계산
읽기 전용
🔧 Effects ($effect)
$effect(() => { console.log('상태 변경됨!'); return () => { /* 정리 작업 */ }; });
부수 효과 처리 (localStorage, API 호출, 이벤트 리스너 등)
탈출구로만 사용 권장
정리 함수로 메모리 누수 방지
🌐 Universal Reactivity (전역 상태)
export const globalState = $state({ count: 0 });.svelte.js 확장자 필수
const + 객체 패턴 권장
🤔 헷갈렸던 점들 & 해결책
Q1. alt 속성 경고가 뭔가요?
접근성(a11y) 때문에 필요
시각장애인, 느린 인터넷 사용자를 위한 이미지 설명
<img src={src} alt="이미지 설명" />Q2. {@html} 언제 위험한가요?
사용자 입력을 {@html}로 출력하면 XSS 공격 위험
내가 작성한 콘텐츠만 안전
해결책: 사용자 입력은 {}로만 출력하거나 살균화
- Q3. $derived에서 .join() 못하나요?
svelte// ❌ 이렇게 하면 안됨
let names = $derived(products.map(p => p.name));
names = names.join(','); // $derived는 읽기 전용!
// ✅ 이렇게 해야 함
let title = $derived(products.map(p => p.name).join(','));
Q4. $effect가 언제 실행되나요?
함수 안에서 사용하는 상태를 자동 추적
배열 길이 변경, 객체 속성 변경 모두 감지
깊은 반응성으로 중첩된 변경도 감지
Q5. $effect를 함수 안에 쓰면?
함수 호출할 때마다 중복 등록됨
최상위 레벨에 한 번만 선언하기
Q6. $state.snapshot() vs $inspect()?
inspect(): 상태 변경시 자동으로 계속 추적
⚖️ 사용 판단 기준
$state vs $derived
직접 변경할 일이 있나?
있다 → $state
없다 → $derived
$effect vs 이벤트 핸들러
99%: 이벤트 핸들러나 $derived 사용
1%: 정말 어쩔 수 없을 때만 $effect
전역 상태 관리
React Context + Redux와 유사
const + 객체 패턴으로 확장성 확보
재할당 방지로 안전성 확보
🛠️ 모범 사례
1. 전역 상태 구조
javascript// stores/app.svelte.js
export const appState = $state({
isLoading: false,
theme: 'light',
notifications: []
});
export const userState = $state({
profile: null,
isAuthenticated: false
});
2. 이벤트 핸들러
svelte
<input on:input={(e) => value = e.target.value} />
3. 안전한 HTML 처리
svelte
Props: 컴포넌트 간 데이터 전달
Logic: 조건부 렌더링, 반복문
Events: 이벤트 처리 고급 기법
Bindings: 양방향 데이터 바인딩
Svelte 5의 핵심은 간단함과 직관성! 복잡한 설정 없이도 강력한 반응성을 제공합니다. ✨
