동적 슬롯 이름
v-slot:[dynamicName], 프로그래밍 방식의 슬롯 선택, 조건부 슬롯 렌더링을 다룹니다.
동적 슬롯 이름은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
동적 슬롯 이름이 필요한 이유
실행 시점이 되기 전까지 채울 슬롯을 알 수 없는 경우가 있습니다. 슬롯은 prop, state 또는 반복 변수에 따라 달라질 수 있습니다. Vue에서는 대괄호 구문으로 슬롯 이름을 계산할 수 있습니다.
동적 인수 구문
v-slot: 뒤에 표현식을 대괄호로 감싸 작성하세요. Vue가 이 표현식을 평가하여 대상 슬롯 이름을 결정합니다.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>대괄호를 사용한 단축 표기
# 단축 표기에서도 동적 인수를 사용할 수 있습니다.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>state에서 이름 가져오기
대괄호 안의 표현식에서는 어떤 반응형 값이든 읽을 수 있습니다. 변수를 토글하면 콘텐츠가 채워지는 슬롯이 바뀝니다.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";렌더링되는 콘텐츠 전환하기
여러 이름 있는 슬롯을 정의한 자식과 함께 사용하면 동적 이름을 통해 state에 따라 서로 다른 영역을 하나의 템플릿에서 표시할 수 있습니다.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>props에서 이름 선택하기
컴포넌트 prop으로 슬롯을 결정할 수 있습니다. 호출하는 쪽에서 영역을 선택할 수 있는 설정 가능한 래퍼를 만들 때 유용합니다.
const props = defineProps({ target: String });
// use props.target inside #[props.target]동적 슬롯 반복하기
반복 항목에서 각 이름을 계산하여 슬롯을 반복 렌더링할 수 있습니다. 표의 열이나 탭 시스템에 유용한 방식입니다.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>소문자와 유효한 이름
동적 슬롯 이름은 유효한 문자열로 결정되어야 합니다. null은 기본 슬롯으로 처리됩니다. 인라인 템플릿을 사용할 때는 공백과 HTML 속성 이름에 사용할 수 없는 문자를 피하세요.
const name = condition ? "primary" : null;
// null -> default slot조건에 따른 슬롯 선택
대괄호 안에 삼항 표현식을 사용하면 템플릿 안에서 조건에 따라 슬롯을 선택할 수 있습니다.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>탭 컴포넌트 사용 사례
Tabs 컴포넌트는 선택한 탭 식별자에서 슬롯 이름을 계산하여 활성 탭 콘텐츠를 렌더링할 수 있습니다. 이렇게 하면 부모를 선언적으로 유지할 수 있습니다.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>읽기 쉽게 유지하기
동적 슬롯은 강력하지만 의도를 숨길 수 있습니다. 슬롯 집합이 실제로 데이터에 따라 달라질 때 사용하고, 고정된 몇 개의 슬롯이라면 일반적인 이름 있는 슬롯이 더 명확하게 읽힙니다.
간단히 확인하기
실행 시점에 이름이 계산되는 슬롯을 선택하는 구문은 무엇인가요?
복습
동적 슬롯 이름은 대괄호 문법 v-slot:[expr] 또는 #[expr]을 사용하여 props나 상태에 따라 어떤 슬롯을 채울지 계산합니다. 이를 통해 구성 가능한 래퍼, 탭 시스템, 데이터 기반 열 렌더링을 구현할 수 있습니다.
자주 묻는 질문
“동적 슬롯 이름” 강의는 무료인가요?
네 — “동적 슬롯 이름” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“동적 슬롯 이름”에서 뭘 배우나요?
v-slot:[dynamicName], 프로그래밍 방식의 슬롯 선택, 조건부 슬롯 렌더링을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“동적 슬롯 이름” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.