Slots 해부: 컨텐츠 슬롯

핵심 개념

slot은 부모가 자식 컴포넌트의 콘텐츠를 주입하는 구멍입니다. 기본 슬롯, named slot, scoped slot이 있습니다. slot을 지우며 콘텐츠 주입이 어떻게 사라지는지 확인하십시오.

코드 분석

VUE📋 코드 (26줄)



const{createApp}=Vue;
const Panel={
  template:`<div style='border:1px solid rgba(255,34,34,0.3);padding:12px;margin-bottom:8px;'>
    <div style='color:#10b981;font-size:9px;letter-spacing:0.2em;margin-bottom:8px;border-bottom:1px solid #1a1a1a;padding-bottom:6px;'>
      <slot name='header'>DEFAULT HEADER</slot>
    </div>
    <div style='color:#888;font-size:11px;'>
      <slot>DEFAULT CONTENT</slot>
    </div>
  </div>`
};
createApp({
  components:{Panel},
  template:`<div>
    <panel>
      <template #header>⚡ UNIT REPORT</template>
      T-800 — 위협도 8 — ACTIVE 상태
    </panel>
    <panel>
      <template #header>🔴 ALERT</template>
      T-1000 — 위협도 10 — CRITICAL
    </panel>
  </div>`
}).mount('#slot-out');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'Slots' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Slots'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'Slots' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'Slots'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

Slots 해부: 컨텐츠 슬롯은 이 3가지만 확실히 잡으세요

1.컴포넌트의 내부 콘텐츠를 props로 전달하면 HTML 구조를 문자열로 넘겨야 해서 유연성이 떨어집니다

2.slot은 부모가 자식 컴포넌트의 특정 영역에 HTML을 직접 삽입하는 메커니즘으로, named slot으로 여러 영역을 구분합니다

3.다음 챕터에서 DOM 계층을 벗어나 렌더링하는 Teleport와 비동기 로딩의 Suspense를 배웁니다

💬 이 챕터 질문 보기

VUE · CH.17 — 질문하거나 답변을 확인하세요

→

진행도 17 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)