컴포넌트

기본 컴포넌트

Hello {name}!

컴포넌트 구조

<script>	컴포넌트 로직 (JS/TS)
마크업	`{표현식}`이 있는 HTML 템플릿
<style>	범위가 지정된 CSS (컴포넌트에 자동 범위)
<script context="module">	인스턴스가 아닌 모듈당 한 번 실행

반응성

반응형 할당

반응형 선언

$:는 반응형 선언과 문장을 표시

반응형 규칙

할당 트리거	`count += 1`이 업데이트 트리거; `obj.x = 1`도 동일
배열 변이	`arr = [...arr, item]` 사용 (트리거를 위해 재할당)
$: 선언	참조된 변수 변경 시 자동 재계산
$: 문장	반응형으로 사이드 이펙트 실행

Props

Props 선언 및 전달

{greeting}, {name}!

스프레드 Props

이벤트

DOM 이벤트

value = e.target.value} />

이벤트 수정자

preventDefault	`e.preventDefault()` 호출
stopPropagation	이벤트 버블링 중지
once	핸들러가 한 번만 실행
self	`event.target`이 요소인 경우에만
capture	캡처 단계 사용

컴포넌트 이벤트

바인딩

양방향 바인딩

요소 및 컴포넌트 바인딩

바인딩 유형

bind:value	Input/select/textarea 값
bind:checked	체크박스 상태
bind:group	라디오/체크박스 그룹
bind:this	DOM 요소 참조
bind:clientWidth/Height	읽기 전용 요소 크기

스토어

쓰기 가능한 스토어

// store.js import { writable } from "svelte/store"; export const count = writable(0); // 컴포넌트 — $로 자동 구독

스토어 메서드

count.set(10);               // 값 설정
count.update(n => n + 1);    // 현재값에서 업데이트
const unsub = count.subscribe(v => console.log(v));

스토어 유형

writable(val)	읽기-쓰기 스토어
readable(val, fn)	읽기 전용, 시작 함수로 설정
derived(stores, fn)	다른 스토어에서 계산
$store	컴포넌트의 자동 구독 문법

트랜지션

내장 트랜지션

{#if visible}페이드 인/아웃
플라이 인, 페이드 아웃

{/if}

트랜지션 옵션

fade	불투명도 0에서 1
fly	x/y 오프셋 + 불투명도 애니메이션
slide	슬라이드 인/아웃 (높이)
scale	스케일 및 페이드
draw	SVG 경로 스트로크 애니메이션
duration	트랜지션 시간 (ms)
delay	시작 전 지연

슬롯

기본 및 이름 있는 슬롯

기본 헤더 기본 내용

제목

본문 내용

슬롯 Props

{#each items as item} {/each}

{index}: {item.name}

컨텍스트

컨텍스트 설정 및 가져오기

컨텍스트 vs 스토어

컨텍스트	컴포넌트 트리 범위, 기본적으로 반응형 아님
스토어	전역, 반응형, 어디서나 임포트 가능
컨텍스트 + 스토어	범위가 지정된 반응성을 위해 컨텍스트를 통해 스토어 전달

SvelteKit 기본

파일 기반 라우팅

src/routes/
  +page.svelte          
  about/+page.svelte    
  blog/[slug]/+page.svelte  

로드 함수

// +page.js (클라이언트 및 서버에서 실행)
export async function load({ params, fetch }) {
  const res = await fetch(`/api/posts/${params.slug}`);
  return { post: await res.json() };
}

주요 파일

+page.svelte	페이지 컴포넌트
+page.js / +page.ts	클라이언트/유니버설 로드 함수
+page.server.js	서버 전용 로드 / 폼 액션
+layout.svelte	공유 레이아웃 래퍼
+error.svelte	에러 페이지
+server.js	API 엔드포인트 (GET, POST, ...)

SVELTE 빠른 참조

Hello {name}!

제목