제네릭 Vue 컴포넌트
제네릭을 적용한 defineComponent, 제네릭 script setup, 타입이 지정된 슬롯 Props를 다룹니다.
제네릭 Vue 컴포넌트은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
제네릭 컴포넌트
일부 컴포넌트는 타입에 관계없이 작동합니다. 타입이 지정된 목록, 선택 상자, 표 등이 그 예입니다. Vue 3.3에서는 제네릭 컴포넌트를 작성하여 사용하는 쪽에서 any로 대체되지 않고 완전한 타입 추론을 유지할 수 있습니다.
generic 속성
<script setup>에 generic 속성을 추가하십시오. 이 속성은 제네릭 함수와 마찬가지로 스크립트 전체에서 사용할 수 있는 타입 매개변수를 선언합니다.
<script setup lang="ts" generic="T">
// T can now be used below
</script>제네릭 Props
defineProps에서 타입 매개변수를 사용하십시오. 여기서 컴포넌트는 어떤 타입이든 가능한 T의 배열을 받습니다.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>호출 위치에서의 타입 추론
부모가 items를 전달하면 TypeScript가 데이터에서 T를 추론하므로 명시적인 타입이 필요하지 않습니다. 숫자를 전달하면 selected도 숫자여야 합니다.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->타입 제한하기
특정 형태를 요구하려면 extends를 추가하십시오. 여기서 T에는 id가 있어야 하므로 키를 사용하는 목록에 유용합니다.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>여러 타입 매개변수
제네릭 함수 시그니처와 마찬가지로 여러 매개변수를 쉼표로 구분하여 선언하십시오.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>타입이 지정된 슬롯 Props
제네릭과 타입이 지정된 슬롯을 결합하면 슬롯 콘텐츠에도 타입을 지정할 수 있습니다. defineSlots로 슬롯 시그니처를 선언하십시오.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>제네릭 슬롯 렌더링하기
템플릿에서 각 항목을 슬롯에 전달하십시오. 그러면 부모가 올바른 타입의 슬롯 props를 받습니다.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>추론을 활용해 사용하기
부모는 전달한 배열을 바탕으로 슬롯 범위에서 타입이 지정된 item을 자동으로 받습니다.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>제네릭 emits
타입 매개변수는 defineEmits에도 전달되므로 이벤트 페이로드에 제네릭 타입을 담을 수 있습니다.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>제네릭을 사용할 때
컴포넌트가 실제로 타입에 구애받지 않고 내부로 타입 추론을 전달하고 싶을 때 제네릭 컴포넌트를 사용하십시오. 목록, 표, 자동 완성 등이 그 예입니다. 데이터 형태가 고정되어 있다면 일반적인 타입 지정 컴포넌트가 더 간단합니다.
빠른 확인
제네릭 컴포넌트에 관한 지식을 테스트해 보십시오.
복습
제네릭 컴포넌트를 배웠습니다.
- script setup의 generic 속성으로 타입 매개변수를 선언합니다.
- defineProps에서 사용하여 items: T[]와 같이 타입에 구애받지 않는 데이터에 적용합니다.
- extends로 제한하고 여러 매개변수를 추가합니다.
- defineSlots로 슬롯 props에 타입을 지정하여 사용하는 쪽에서 완전한 타입 추론을 얻습니다.
자주 묻는 질문
“제네릭 Vue 컴포넌트” 강의는 무료인가요?
네 — “제네릭 Vue 컴포넌트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“제네릭 Vue 컴포넌트”에서 뭘 배우나요?
제네릭을 적용한 defineComponent, 제네릭 script setup, 타입이 지정된 슬롯 Props를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“제네릭 Vue 컴포넌트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.