<script>...</script> | JavaScript 로직 |
<script lang="ts">...</script> | TypeScript 지원 |
<style>...</style> | 범위 지정 CSS |
<style global>...</style> | 전역 CSS |
{expression} | 텍스트 보간 |
{@html rawHtml} | 원시 HTML |
{@debug variable} | 디버그 출력 |
let count = 0; | 반응형 변수 |
$: doubled = count * 2; | 반응형 선언 |
$: { console.log(count); } | 반응형 문 |
$: if (count > 10) { ... } | 반응형 조건 |
count = count + 1; | 업데이트 트리거 |
arr = [...arr, item]; | 배열 업데이트 |
obj = { ...obj, key: value }; | 객체 업데이트 |
{#if condition}...{/if} | if 블록 |
{:else if condition} | else if |
{:else} | else |
{#each items as item}...{/each} | each 루프 |
{#each items as item, i} | 인덱스와 함께 |
{#each items as item (item.id)} | 키가 있는 each |
{:else} | 빈 리스트 폴백 |
{#await promise}...{/await} | await 블록 |
{#await promise}Loading...{:then data} | 로딩과 함께 |
{:catch error} | 에러 처리 |
{#await promise then data} | 짧은 구문 |
bind:value={variable} | 입력 바인딩 |
bind:checked={bool} | 체크박스 바인딩 |
bind:group={selected} | 라디오/체크박스 그룹 |
bind:this={element} | 요소 참조 |
bind:clientWidth={w} | 크기 바인딩 |
bind:innerHTML={html} | 내부 HTML 바인딩 |
on:click={handler} | 클릭 이벤트 |
on:click={() => count++} | 인라인 핸들러 |
on:click|preventDefault | 기본 동작 방지 |
on:click|stopPropagation | 전파 중지 |
on:click|once | 한 번만 실행 |
on:click|capture | 캡처 단계 |
on:keydown|self | 요소에서만 |
use:action | 액션 사용 |
use:action={params} | 매개변수와 함께 |
export function action(node) { } | 액션 정의 |
return { destroy() {} } | 정리 함수 |
return { update(params) {} } | 업데이트 함수 |
export let prop; | prop 선언 |
export let prop = defaultValue; | 기본값과 함께 |
<Child {prop} /> | prop 전달 (축약) |
<Child prop={value} /> | prop 전달 |
<Child {...obj} /> | props 전개 |
$$props | 모든 props |
$$restProps | 나머지 props |
import { createEventDispatcher } from "svelte" | 이벤트 디스패처 |
const dispatch = createEventDispatcher(); | 디스패처 생성 |
dispatch("eventName", data); | 이벤트 발생 |
<slot /> | 기본 슬롯 |
<slot name="header" /> | 이름있는 슬롯 |
<slot {data} /> | 슬롯 props |
<div slot="header"> | 이름있는 슬롯 사용 |
let:data | 슬롯 props 받기 |
import { setContext, getContext } from "svelte" | 컨텍스트 API |
setContext("key", value); | 컨텍스트 설정 |
const value = getContext("key"); | 컨텍스트 얻기 |
import { writable } from "svelte/store" | 쓰기 가능 스토어 |
const store = writable(initialValue); | 쓰기 가능 생성 |
import { readable } from "svelte/store" | 읽기 전용 스토어 |
const store = readable(initial, start); | 읽기 전용 생성 |
import { derived } from "svelte/store" | 파생 스토어 |
const derived = derived(store, $s => ...) | 파생 생성 |
$store | 자동 구독 (컴포넌트 내) |
store.subscribe(value => ...) | 수동 구독 |
store.set(value) | 값 설정 |
store.update(n => n + 1) | 값 업데이트 |
$store = value | $로 설정 |
import { onMount } from "svelte" | 마운트 훅 |
onMount(() => { return cleanup; }) | 정리와 함께 |
import { onDestroy } from "svelte" | 소멸 훅 |
import { beforeUpdate, afterUpdate } from "svelte" | 업데이트 훅 |
import { tick } from "svelte" | DOM 업데이트 대기 |
import { fade, fly, slide } from "svelte/transition" | 내장 전환 |
transition:fade | 페이드 전환 |
transition:fly={{ y: 200 }} | 매개변수 있는 fly |
in:fade out:fly | 다른 진입/퇴장 |
transition:fade|local | 로컬 전환 |
import { tweened, spring } from "svelte/motion" | 모션 스토어 |
src/routes/+page.svelte | 페이지 컴포넌트 |
src/routes/+layout.svelte | 레이아웃 컴포넌트 |
src/routes/+page.ts | 페이지 로드 함수 |
src/routes/+page.server.ts | 서버 로드 |
src/routes/[slug]/+page.svelte | 동적 라우트 |
src/routes/api/+server.ts | API 엔드포인트 |
export const load = async () => {} | 로드 함수 |
export let data; | 로드 데이터 받기 |
({ params, fetch }) => | 로드 매개변수 |
export const actions = { default: async () => {} } | 폼 액션 |
import { error, redirect } from "@sveltejs/kit" | 에러/리다이렉트 |