Vue Academy · 강의

스코프 슬롯: 부모에게 데이터 전달하기

slot :data='value', 부모 측의 v-slot='{ data }', 렌더 prop 패턴을 다룹니다.

스코프 슬롯: 부모에게 데이터 전달하기은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

일반 슬롯의 한계

일반 슬롯을 사용하면 부모가 마크업을 자식에게 전달할 수 있지만, 부모는 자식의 내부 데이터에 접근할 수 없습니다. 스코프 슬롯은 자식이 슬롯 콘텐츠에 데이터를 다시 노출하도록 하여 이 문제를 해결합니다.

슬롯에 데이터 바인딩하기

자식은 <slot> 요소에 속성을 바인딩하며, 이를 슬롯 props라고 합니다. 이 속성들은 부모가 렌더링하는 콘텐츠에 전달됩니다.

<!-- List.vue -->
<ul>
  <li v-for="(item, i) in items" :key="item.id">
    <slot :item="item" :index="i"></slot>
  </li>
</ul>

슬롯 props 받기

부모에서 v-slot의 값은 자식이 바인딩한 모든 슬롯 props를 포함하는 객체가 됩니다.

<List :items="users">
  <template v-slot:default="slotProps">
    {{ slotProps.index }}: {{ slotProps.item.name }}
  </template>
</List>

슬롯 props 구조 분해하기

슬롯 값은 객체일 뿐이므로 인라인으로 구조를 분해해 코드를 더 깔끔하게 작성할 수 있습니다.

<List :items="users">
  <template v-slot:default="{ item, index }">
    {{ index }}: {{ item.name }}
  </template>
</List>

기본 스코프 슬롯의 단축 표기

기본 슬롯만 사용하는 경우 중첩된 템플릿 대신 컴포넌트 태그에 직접 v-slot을 작성할 수 있습니다.

<List :items="users" v-slot="{ item }">
  {{ item.name }}
</List>

이름 바꾸기와 기본값

구조 분해에서는 일반 JavaScript와 마찬가지로 이름을 바꾸고 기본값을 지정할 수 있습니다.

<template v-slot:default="{ item: user, index = 0 }">
  {{ index }} - {{ user.name }}
</template>

이름 있는 스코프 슬롯

이름 있는 슬롯도 스코프를 지정할 수 있습니다. 이름과 구조 분해한 props를 함께 사용하세요.

<DataTable :rows="rows">
  <template #cell="{ value, column }">
    <strong>{{ column }}: {{ value }}</strong>
  </template>
</DataTable>

렌더링하지 않는 컴포넌트

스코프 슬롯을 사용하면 렌더링하지 않는 컴포넌트 패턴을 구현할 수 있습니다. 컴포넌트가 로직과 상태를 처리하지만 자체 마크업은 렌더링하지 않고, 스코프 슬롯을 통해 데이터만 노출하여 부모가 UI를 결정하게 하는 방식입니다.

렌더링하지 않는 마우스 추적기

이 컴포넌트는 커서의 움직임을 추적하고 좌표를 노출합니다. 기본 슬롯만 렌더링하면서 x와 y를 전달합니다.

<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>

렌더링하지 않는 컴포넌트 사용하기

부모가 모든 시각적 요소를 제공하고 노출된 데이터를 읽으므로, 로직과 표현이 완전히 분리됩니다.

<Mouse v-slot="{ x, y }">
  <p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>

스코프 슬롯과 컴포저블 비교

Vue 3에서는 순수한 로직 재사용을 위해 컴포저블이 렌더링하지 않는 컴포넌트를 대체하는 경우가 많습니다. 하지만 자식이 반복이나 구조(예: 목록이나 표)를 제어하면서 부모가 각 항목을 사용자 지정해야 할 때는 여전히 스코프 슬롯이 더 적합합니다.

간단히 확인하기

부모는 스코프 슬롯이 노출한 데이터를 어떻게 받나요?

복습

자식이 <slot>에 props를 바인딩하여 부모 방향으로 데이터를 노출하도록 하는 스코프 슬롯을 배웠습니다. 부모는 v-slot의 값으로 이 데이터를 읽으며, 이 값은 흔히 구조 분해됩니다. 이를 통해 로직과 표현을 분리하는 렌더링하지 않는 컴포넌트를 구현할 수 있습니다.

자주 묻는 질문

“스코프 슬롯: 부모에게 데이터 전달하기” 강의는 무료인가요?

네 — “스코프 슬롯: 부모에게 데이터 전달하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“스코프 슬롯: 부모에게 데이터 전달하기”에서 뭘 배우나요?

slot :data='value', 부모 측의 v-slot='{ data }', 렌더 prop 패턴을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“스코프 슬롯: 부모에게 데이터 전달하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기