defineProps/defineEmits로 Props와 Emits 타입 지정
Generic defineProps (), 복합 타입, 선택적 Props와 Emit 타입 지정을 다룹니다.
defineProps/defineEmits로 Props와 Emits 타입 지정은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
컴포넌트 입력과 출력에 타입 지정하기
lang="ts"를 사용하면 defineProps와 defineEmits 매크로에 TypeScript 타입을 직접 전달할 수 있습니다. 이를 통해 컴포넌트로 들어오고 나가는 데이터에 대해 컴파일 시 검사를 수행할 수 있습니다.
인터페이스에서 Props 정의하기
defineProps 제네릭에 타입을 전달하십시오. 인터페이스를 사용하면 복잡한 props 구조를 읽기 쉽고 재사용 가능하게 유지할 수 있습니다.
<script setup lang="ts">
interface Props {
title: string
count: number
}
const props = defineProps<Props>()
</script>인라인 타입 리터럴
작은 컴포넌트에서는 인라인 객체 타입을 사용해도 괜찮습니다. 별도의 인터페이스가 필요하지 않습니다.
<script setup lang="ts">
const props = defineProps<{
label: string
disabled: boolean
}>()
</script>?로 선택적 속성 지정하기
?로 속성을 선택 사항으로 표시하십시오. 선택적 props의 타입은 T | undefined가 되며 부모는 해당 props를 생략할 수 있습니다.
<script setup lang="ts">
interface Props {
title: string
subtitle?: string
}
const props = defineProps<Props>()
</script>복합 Props 타입
Props에는 배열, 유니언 또는 객체 구조 등 TypeScript로 표현할 수 있는 모든 타입을 사용할 수 있습니다.
<script setup lang="ts">
interface Props {
items: string[]
size: 'sm' | 'md' | 'lg'
user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>withDefaults로 기본값 설정하기
타입만 지정하는 형식에는 기본값을 담을 수 없으므로 withDefaults로 감싸십시오. 두 번째 인수에서 props 이름을 기본값에 매핑합니다.
<script setup lang="ts">
const props = withDefaults(defineProps<{
size?: string
count?: number
}>(), {
size: 'md',
count: 0
})
</script>객체와 배열의 기본값
Options API에서와 마찬가지로 객체와 배열의 기본값은 팩토리 함수에서 반환해야 합니다. 그래야 컴포넌트 간에 하나의 인스턴스를 공유하는 일을 피할 수 있습니다.
withDefaults(defineProps<{
tags?: string[]
}>(), {
tags: () => []
})타입이 지정된 emit 선언하기
defineEmits에는 각 이벤트와 해당 페이로드를 호출 시그니처로 나열한 타입을 전달할 수 있습니다. 이를 통해 컴파일 시 잘못된 페이로드 타입을 찾아낼 수 있습니다.
<script setup lang="ts">
const emit = defineEmits<{
(e: 'change', value: string): void
(e: 'delete', id: number): void
}>()
</script>타입이 지정된 페이로드 내보내기
이제 emit은 유효한 이벤트 이름과 일치하는 페이로드 타입만 허용합니다. 문자열이 필요한 곳에 숫자를 전달하면 컴파일 오류가 발생합니다.
function rename(name: string) {
emit('change', name) // ok
// emit('change', 123) // type error
}명명된 튜플 구문
Vue 3.3 이상에서는 각 이벤트를 인수 타입의 튜플에 매핑하는 간결한 객체 형식을 지원합니다. 호출 시그니처보다 더 깔끔합니다.
<script setup lang="ts">
const emit = defineEmits<{
change: [value: string]
delete: [id: number]
}>()
</script>Props와 emits 함께 사용하기
일반적인 타입 지정 컴포넌트는 두 가지를 모두 선언합니다. defineProps로 입력을, defineEmits로 출력을 선언하여 처음부터 끝까지 검사할 수 있습니다.
<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
'update:modelValue': [value: string]
}>()
</script>빠른 확인
타입이 지정된 props와 emits에 관한 지식을 테스트해 보십시오.
복습
타입이 지정된 컴포넌트 입출력을 배웠습니다.
- 인터페이스 또는 인라인 타입을 defineProps<T>()에 전달합니다.
- 선택적 props에는 ?를 사용하고 기본값에는 withDefaults를 사용합니다(객체와 배열에는 팩토리 사용).
- defineEmits<T>()로 이벤트 이름과 페이로드 타입을 지정합니다.
- 튜플 형식(event: [payload])은 최신 간결 표기법입니다.
자주 묻는 질문
“defineProps/defineEmits로 Props와 Emits 타입 지정” 강의는 무료인가요?
네 — “defineProps/defineEmits로 Props와 Emits 타입 지정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“defineProps/defineEmits로 Props와 Emits 타입 지정”에서 뭘 배우나요?
Generic defineProps (), 복합 타입, 선택적 Props와 Emit 타입 지정을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“defineProps/defineEmits로 Props와 Emits 타입 지정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Vue 프로젝트의 TypeScript 설정
- defineProps/defineEmits로 Props와 Emits 타입 지정
- 컴포저블과 Ref의 타입 지정
- 제네릭 Vue 컴포넌트