속성으로 스니펫 전달하기
스니펫 값을 속성으로 받아 매우 유연한 컴포넌트 API를 구축합니다.
속성으로 스니펫 전달하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
프롭으로 사용하는 스니펫
스니펫은 다른 값과 마찬가지로 자식 컴포넌트에 전달할 수 있습니다.
정의하고 전달하기
부모에서 인라인으로 정의한 뒤 이름으로 참조합니다.
{#snippet item(thing)}<li>{thing.name}</li>{/snippet}
<List itemSnippet={item} items={data} />자식에서 받기
스니펫을 타입이 지정된 프롭으로 선언합니다.
let { itemSnippet, items } = $props();
{#each items as thing}
{@render itemSnippet(thing)}
{/each}렌더 프롭 패턴
이는 React 스타일의 렌더 프롭을 일반화한 패턴입니다. 부모가 자식을 렌더링하는 방식을 제어합니다.
사용자 지정
부모마다 서로 다른 스니펫을 제공하여 레이아웃을 완전히 사용자 지정할 수 있습니다.
타입이 지정된 스니펫 프롭
TypeScript를 사용하면 스니펫 매개변수의 타입을 지정할 수 있으므로 자식 컴포넌트에서 자동 완성을 사용할 수 있습니다.
let { itemSnippet }: { itemSnippet: Snippet<[Thing]> } = $props();선택적 스니펫
스니펫 프롭은 선택 사항으로 지정할 수 있으며, 제공된 경우에만 렌더링합니다.
{#if itemSnippet}
{@render itemSnippet(thing)}
{/if}자식 스니펫
기본 스니펫은 $props()에서 children으로 노출됩니다.
let { children } = $props();
{@render children()}조합의 강점
스니펫 프롭은 헤드리스 및 조합 가능한 사용자 인터페이스 라이브러리의 기반입니다.
TypeScript 가져오기
올바른 타입 지정을 위해 svelte에서 Snippet 타입을 가져옵니다.
import type { Snippet } from "svelte";슬롯과 비교
스니펫 프롭은 슬롯보다 유연합니다. 매개변수를 받고 조건부로 렌더링할 수 있습니다.
빠른 확인
스니펫을 프롭으로 어떻게 받습니까?
복습
스니펫을 프롭으로 전달하면 제어의 방향을 바꿀 수 있습니다. 부모는 렌더링 로직을 제공하고 자식은 @render를 통해 이를 호출합니다.
자주 묻는 질문
“속성으로 스니펫 전달하기” 강의는 무료인가요?
네 — “속성으로 스니펫 전달하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“속성으로 스니펫 전달하기”에서 뭘 배우나요?
스니펫 값을 속성으로 받아 매우 유연한 컴포넌트 API를 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“속성으로 스니펫 전달하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.