Props와 CustomEvent
Props로 데이터를 아래로 전달하고 부모 컴포넌트로 이벤트를 위로 발생시킵니다.
Props와 CustomEvent은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
부모와 자식 간 통신
컴포넌트는 두 방향으로 통신합니다:
- props는 부모에서 자식으로 데이터를 전달합니다
- 이벤트는 자식에서 부모로 메시지를 보냅니다
이러한 단방향 데이터 흐름은 앱을 예측 가능하게 유지해 줍니다.
속성 선언하기
자식은 자신이 받을 속성을 선언합니다. 스크립트 설정에서는 defineProps를 사용합니다.
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>타입이 있는 속성
검증할 타입을 지정하려면 속성을 객체로 선언합니다.
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>기본값과 필수 속성이 있는 속성
속성을 필수로 표시하고 기본값을 지정할 수 있습니다.
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>부모에서 속성 전달하기
부모는 속성으로 데이터를 전달합니다. 동적 값을 바인딩하려면 :을 사용합니다.
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->속성 이름 규칙
JS에서는 속성을 camelCase로 선언하고, 템플릿에서는 케밥 표기법으로 전달합니다.
- JS 속성: isActive
- 템플릿 속성: :is-active
Vue가 두 표기법 사이를 자동으로 변환합니다.
속성은 읽기 전용입니다
자식은 속성을 직접 변경해서는 안 됩니다.
- 속성은 아래 방향으로 한쪽으로만 흐릅니다
- 속성을 변경하면 예측 가능성이 깨지고 경고가 발생합니다
- 공유 데이터를 변경하려면 이벤트를 보내 부모가 업데이트하도록 합니다
이벤트 선언하기
자식은 defineEmits를 사용해 자신이 보낼 이벤트를 선언합니다.
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>이벤트 보내기
emit 함수를 호출해 위쪽으로 이벤트를 보낼 수 있으며, 필요하면 전달 정보도 함께 보낼 수 있습니다.
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>옵션 API에서 이벤트 보내기
옵션 API에서는 대신 this.$emit을 호출합니다.
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}부모에서 이벤트 수신하기
부모는 @event-name으로 이벤트를 수신하고 전달 정보를 받습니다.
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>빠른 확인
속성과 이벤트에 대한 이해도를 확인해 보세요.
복습: 속성과 이벤트
컴포넌트 통신을 배웠습니다:
- defineProps는 타입과 기본값이 있는 속성을 선언합니다
- 속성은 아래로 흐르며 읽기 전용입니다
- defineEmits는 이벤트를 선언합니다
- emit("name", payload)는 이벤트를 위로 보냅니다
- 부모는 @event로 수신합니다
다음: 슬롯과 범위 슬롯입니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 42
- 레슨
- 156
자주 묻는 질문
“Props와 CustomEvent” 강의는 무료인가요?
네 — “Props와 CustomEvent” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“Props와 CustomEvent”에서 뭘 배우나요?
Props로 데이터를 아래로 전달하고 부모 컴포넌트로 이벤트를 위로 발생시킵니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.
“Props와 CustomEvent” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 컴포넌트 생성과 등록
- Props와 CustomEvent
- 슬롯과 범위가 지정된 슬롯