{#snippet} 및 {@render}
스니펫으로 재사용 가능한 템플릿 조각을 정의하고 어디서든 렌더링합니다.
{#snippet} 및 {@render}은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
스니펫
스니펫은 Svelte 5에서 재사용할 수 있는 템플릿 조각으로, 렌더링 함수나 이름이 지정된 슬롯과 비슷합니다.
스니펫 정의하기
{#snippet name(args)}...{/snippet}을 사용합니다.
{#snippet greeting(name)}
<p>Hello, {name}!</p>
{/snippet}스니펫 렌더링하기
{@render name(args)}를 사용하여 호출합니다.
{@render greeting("Ada")}스니펫 매개변수
스니펫은 함수처럼 인수를 받고, 렌더링할 때 인수를 전달합니다.
재사용성
한 번 정의한 뒤 서로 다른 인수로 여러 번 렌더링할 수 있습니다.
{@render greeting("Ada")}
{@render greeting("Bea")}반복 대체하기
스니펫을 사용하면 마크업이 많은 컴포넌트에서 중복을 줄일 수 있습니다.
컴포넌트 내부에서 정의
스니펫은 JS가 아니라 컴포넌트의 마크업 내부에 존재합니다.
범위
스니펫에서는 이를 둘러싼 컴포넌트 범위의 변수를 참조할 수 있습니다.
프롭으로 전달하기
유연한 조합을 위해 스니펫을 다른 컴포넌트에 프롭으로 전달할 수 있습니다.
슬롯 대체하기
스니펫은 슬롯을 일반화한 기능으로, 더 유연하고 조합 가능하며 타입도 지정할 수 있습니다.
TypeScript
스니펫 타입은 매개변수와 반환 타입에서 추론됩니다.
빠른 확인
스니펫을 어떻게 렌더링합니까?
복습
스니펫은 매개변수화된 템플릿 조각입니다. {#snippet}으로 정의하고 {@render}로 호출합니다.
자주 묻는 질문
“{#snippet} 및 {@render}” 강의는 무료인가요?
네 — “{#snippet} 및 {@render}” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“{#snippet} 및 {@render}”에서 뭘 배우나요?
스니펫으로 재사용 가능한 템플릿 조각을 정의하고 어디서든 렌더링합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“{#snippet} 및 {@render}” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 형식이 지정된 속성을 위한 $props()
- {#snippet} 및 {@render}
- 속성으로 스니펫 전달하기
- 기본 스니펫과 이름 있는 스니펫