Svelte Reference

Svelte 프레임워크 레퍼런스

26개 결과

Svelte Reference 소개

Svelte 레퍼런스는 Svelte 프레임워크의 핵심 문법을 검색할 수 있는 빠른 참조 가이드로, 컴포넌트, 반응성, 스토어, 이벤트, 바인딩, 트랜지션의 6개 카테고리를 다룹니다. 각 항목에는 문법 패턴, 명확한 설명, Svelte 3/4 프로젝트에서 바로 사용 가능한 코드 예제가 포함되어 있습니다. React나 Vue와 달리 Svelte는 빌드 타임에 컴포넌트를 효율적인 명령형 JavaScript로 컴파일하므로, 성능 이점을 활용하려면 고유한 문법을 이해하는 것이 필수적입니다.

Svelte는 작업을 브라우저에서 컴파일러로 이동시켜 UI 개발에 근본적으로 다른 접근 방식을 도입했습니다. 가상 DOM이 없으며, 대신 반응형 할당을 통해 외과적으로 정밀한 DOM 업데이트를 생성합니다. 이 레퍼런스는 $: 반응형 레이블, 스토어의 $ 접두사 자동 구독, {#each}/{#if}/{#await} 템플릿 블록, fade/fly/slide 및 커스텀 트랜지션 함수를 포함한 내장 트랜지션 시스템 등 다른 프레임워크에 직접적인 대응물이 없는 Svelte 고유 패턴을 다룹니다.

export let으로 props를 선언하거나, subscribe/set/update로 커스텀 스토어를 생성하거나, createEventDispatcher로 컴포넌트 이벤트를 디스패치하거나, bind:value로 폼 입력을 바인딩하거나, animate:flip으로 리스트 재정렬을 애니메이션할 때, 이 치트 시트는 정확한 문법과 사용 패턴을 제공합니다. 간단한 싱글 페이지 앱부터 복잡한 SvelteKit 기반 풀스택 프로젝트까지, Svelte 애플리케이션을 빌드하면서 빠른 검색이 필요한 프론트엔드 개발자를 위해 설계되었습니다.

주요 기능

TypeScript 지원 스크립트 블록, 기본값이 있는 export let을 통한 props, 이름 및 기본 슬롯, 조건부/리스트/비동기 렌더링을 위한 템플릿 블록을 포함한 컴포넌트 기본 사항
$: 레이블을 사용한 계산된 값의 반응형 선언, 반응형 구문, 업데이트 트리거를 위한 배열/객체 불변성 패턴, DOM 업데이트 후 로직을 위한 tick()
writable, readable, derived 스토어, 컴포넌트에서 $ 접두사를 이용한 자동 구독, 캡슐화된 비즈니스 로직을 가진 커스텀 스토어 생성을 포괄하는 스토어 시스템
on: 디렉티브를 이용한 이벤트 핸들링, 이벤트 수정자(preventDefault, stopPropagation, once, self), createEventDispatcher를 통한 커스텀 이벤트 디스패치, 컴포넌트 계층을 통한 이벤트 전달
텍스트 입력, 숫자 입력, 텍스트영역, 셀렉트, 체크박스(bind:checked), 라디오 그룹(bind:group), DOM 요소 참조(bind:this), 크기 추적(bind:clientWidth)을 위한 양방향 바인딩
설정 가능한 파라미터를 가진 fade, fly, slide 내장 트랜지션, 별도의 in/out 트랜지션, 리스트 재정렬을 위한 animate:flip 디렉티브, tick 콜백을 이용한 커스텀 트랜지션 함수
Svelte 개념 카테고리별로 정리된 검색 및 필터링 가능한 인터페이스, JavaScript/HTML 템플릿 코드의 구문 강조
모든 예제는 Svelte 3/4 컨벤션을 따르며, 독립형 Svelte 프로젝트와 SvelteKit 애플리케이션 모두에서 호환

자주 묻는 질문

Svelte 반응성과 React 상태의 차이점은 무엇인가요?

React에서는 setState나 useState의 setter를 명시적으로 호출하여 리렌더링을 트리거합니다. Svelte에서는 컴포넌트 내 최상위 변수에 대한 할당이 자동으로 DOM 업데이트를 트리거합니다. $: 레이블은 의존성이 변경될 때마다 재계산되는 파생/계산된 값을 생성합니다. 이 컴파일러 기반 접근 방식은 훅이나 명시적 의존성 배열의 필요성을 제거합니다.

Svelte 반응성을 위해 배열과 객체를 왜 재할당해야 하나요?

Svelte는 변이(mutation)가 아닌 할당(assignment)을 통해 반응성을 추적합니다. items.push(newItem)을 호출하면 할당 없이 배열을 변이하므로 Svelte가 변경을 감지하지 못합니다. 대신 items = [...items, newItem] 또는 items = items.filter(...)를 사용하세요. 이 패턴은 컴파일러가 업데이트 코드를 생성하도록 보장합니다. 객체도 마찬가지로 obj.newKey = value 대신 obj = { ...obj, newKey: value }를 사용하세요.

Svelte 스토어는 React Context나 Redux와 어떻게 다른가요?

Svelte 스토어는 간단한 subscribe/set/update API를 가진 경량 반응형 컨테이너입니다. writable 스토어는 writable(initialValue) 한 줄로 생성됩니다. 컴포넌트에서 $ 접두사는 자동 구독 및 자동 구독 해제를 처리합니다. Redux와 달리 액션/리듀서 보일러플레이트가 없습니다. React Context와 달리 프로바이더 컴포넌트가 필요 없으며 어떤 .svelte 파일에서든 직접 임포트할 수 있습니다.

이벤트 수정자란 무엇이며 언제 사용해야 하나요?

이벤트 수정자는 on: 핸들러에 파이프로 구분하여 추가하는 디렉티브입니다. 주요 수정자로는 preventDefault(브라우저 기본 동작 방지), stopPropagation(이벤트 버블링 방지), once(한 번만 실행 후 제거), self(event.target이 해당 요소일 때만 트리거), capture(캡처 단계 사용)가 있습니다. 핸들러 함수 내에서 이벤트 메서드를 호출할 필요를 대체합니다.

bind:value는 on:input과 비교하여 어떻게 작동하나요?

bind:value는 입력 요소와 변수 사이에 양방향 바인딩을 생성합니다. 사용자가 입력하면 변수가 자동으로 업데이트되고, 변수가 프로그래밍적으로 변경되면 입력이 새 값을 반영합니다. 이것은 value={variable}과 on:input={(e) => variable = e.target.value}를 결합한 것과 동일합니다. Svelte는 체크박스를 위한 bind:checked와 라디오/체크박스 그룹을 위한 bind:group도 제공합니다.

Svelte에서 커스텀 트랜지션을 만들 수 있나요?

네. 커스텀 트랜지션은 DOM 노드와 선택적 파라미터를 받아 duration, delay, easing, tick 함수가 포함된 객체를 반환하는 함수입니다. tick 함수는 트랜지션 중에 t 값(0~1)으로 호출됩니다. 예를 들어 타이프라이터 효과는 t에 따라 node.textContent를 슬라이싱하여 텍스트를 점진적으로 표시할 수 있습니다. 커스텀 트랜지션은 transition:, in:, out: 디렉티브와 원활하게 통합됩니다.

스토어의 $ 접두사와 자동 구독은 어떻게 작동하나요?

컴포넌트 스크립트나 템플릿 내에서 스토어 변수에 $를 접두사로 붙이면, Svelte가 컴포넌트 마운트 시 자동으로 구독하고 파괴 시 구독을 해제합니다. $count를 쓰는 것은 count.subscribe(value => ...)로 구독하고 최신 값을 저장하는 것과 동일합니다. 직접 할당도 가능합니다: $count = 5는 count.set(5)와 동일하며, $count++는 count.update(n => n + 1)과 같습니다.

Svelte에서 컴포넌트 합성을 위한 슬롯은 어떻게 작동하나요?

슬롯은 부모 컴포넌트가 자식 컴포넌트 템플릿에 콘텐츠를 전달할 수 있게 합니다. 기본 <slot>은 컴포넌트 태그 사이에 배치된 모든 콘텐츠를 렌더링합니다. 이름 있는 슬롯은 자식에서 <slot name="header">를 사용하고 부모의 콘텐츠에 slot="header" 속성을 사용합니다. 슬롯은 콘텐츠가 제공되지 않을 때 표시되는 기본 콘텐츠를 가질 수 있습니다. 슬롯 props는 let: 디렉티브를 통해 자식이 부모에게 데이터를 전달할 수 있게 합니다.