$$slots로 슬롯 콘텐츠 확인하기
$$slots를 검사해 슬롯이 사용된 경우에만 래퍼 마크업을 조건부로 렌더링합니다.
$$slots로 슬롯 콘텐츠 확인하기은(는) CoddyKit의 무료 Sveltejs Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Sveltejs Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
슬롯을 검사하는 이유
슬롯에 콘텐츠가 있을 때만 테두리나 헤더 같은 래퍼 마크업을 렌더링하고 싶은 경우가 있습니다.
slots 객체
구성 요소 내부에서 $$slots는 콘텐츠가 채워진 각 슬롯에 해당하는 속성을 가진 객체입니다.
채워지면 참이 됨
슬롯에 콘텐츠가 있으면 $$slots에서 해당 키의 값이 참으로 평가됩니다.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}빈 래퍼 피하기
슬롯이 비어 있으면 래퍼 마크업을 렌더링하지 않아 DOM을 깔끔하게 유지하세요.
기본값과 함께 사용하기
대체 콘텐츠를 사용할지, 래퍼를 완전히 생략할지 선택할 수 있습니다.
반응형 감지
렌더링 사이에 슬롯에 전달되는 콘텐츠가 바뀌면 $$slots가 반응형으로 업데이트됩니다.
여러 슬롯과 함께 사용하기
이름이 지정된 각 슬롯을 독립적으로 검사하세요.
{#if $$slots.header || $$slots.footer}...카드에서 흔히 사용됨
제목이나 푸터가 선택 사항인 카드에서 이 패턴을 자주 사용합니다.
기본 슬롯 키
기본 슬롯은 $$slots.default 아래에 나타납니다.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
TypeScript 사용자는 $$slots의 자동 완성을 사용하도록 $$Slots 타입을 선언할 수 있습니다.
장단점
마크업에 분기 처리가 추가되지만 더 깔끔한 결과를 만듭니다. 디자인 시스템에서는 사용할 가치가 있습니다.
확인 문제
$$slots.header는 무엇을 검사합니까?
복습
$$slots.name을 사용하여 상위 구성 요소가 슬롯을 채웠는지 감지하고, 채우지 않았다면 래퍼 마크업을 생략하세요.
자주 묻는 질문
“$$slots로 슬롯 콘텐츠 확인하기” 강의는 무료인가요?
네 — “$$slots로 슬롯 콘텐츠 확인하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Sveltejs Academy 강의 전체를 잠금 해제할 수 있습니다. Sveltejs Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“$$slots로 슬롯 콘텐츠 확인하기”에서 뭘 배우나요?
$$slots를 검사해 슬롯이 사용된 경우에만 래퍼 마크업을 조건부로 렌더링합니다. 브라우저에서 직접 실행하는 실습 코드로 Sveltejs Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Sveltejs Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Sveltejs Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“$$slots로 슬롯 콘텐츠 확인하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Sveltejs Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Sveltejs Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 콘텐츠 투영을 위한 기본 슬롯
- slot="name"을 사용한 이름 있는 슬롯
- 슬롯 대체 콘텐츠
- $$slots로 슬롯 콘텐츠 확인하기