슬롯(slot)과 스코프 슬롯(scoped slot)이란 무엇인가요?

Question

Accepted Answer

**슬롯**은 부모가 자식 컴포넌트에 **템플릿 콘텐츠**를 전달하게 해줍니다 — 사용자가 내부 마크업을 제어하는 유연하고 재사용 가능한 래퍼(카드, 모달, 레이아웃)를 만드는 방법입니다. ## 기본 슬롯 ```vue ``` ```vue

Title

Any content!

``` 자식은 "구멍"(``)을 정의하고, 부모는 원하는 마크업으로 그것을 채웁니다. 이는 props로 문자열을 전달하는 것보다 훨씬 유연합니다. ## 명명된 슬롯 — 여러 삽입 지점 ```vue ``` ```vue

Main content (기본 슬롯)

``` ## 스코프 슬롯 — 자식이 슬롯 콘텐츠로 데이터를 위로 전달 때로는 자식이 부모의 슬롯에서 필요한 데이터(예: 리스트의 각 항목)를 가지고 있습니다. **스코프 슬롯**은 자식의 데이터를 부모의 템플릿에 노출합니다. ```vue ``` ```vue ``` 스코프 슬롯은 **렌더리스/헤드리스 컴포넌트**의 핵심입니다: 자식은 로직(반복, 페칭, 상태)을 처리하고, 부모가 프레젠테이션을 완전히 제어하게 합니다. ## 왜 중요한가 슬롯은 Vue의 콘텐츠 배포 메커니즘입니다 — 재사용 가능한 레이아웃 및 래퍼 컴포넌트에 필수적입니다. 명명된 슬롯은 여러 삽입 지점을 제공하고, 스코프 슬롯(자식 데이터를 부모가 정의한 템플릿에 노출)은 헤드리스 컴포넌트나 커스터마이즈 가능한 리스트/테이블 같은 강력한 패턴을 가능하게 합니다. 이들은 Vue 컴포넌트를 경직되지 않고 조합 가능하게 만드는 요소입니다.