컴포넌트는 재사용 가능하고 독립적인 UI 조각입니다. props는 부모가 자식에게 데이터를 아래로 전달하는 방법입니다 — 자식의 타입이 지정된 읽기 전용 입력입니다.
자식에서 props 정의하기
vue
<!-- UserCard.vue -->
<script setup>
// 타입, 필수 여부, 기본값과 함께 props 선언
const props = defineProps({
name: { type: String, required: true },
age: { type: Number, default: 0 },
isAdmin: { type: Boolean, default: false },
});
</script>
<template>
<div class="card">
<h2>{{ name }}</h2> <!-- 템플릿에서 props를 직접 사용 -->
<p>Age: {{ age }}</p>
</div>
</template>
부모에서 props 전달하기
vue
<template>
<UserCard name="Ann" :age="30" :is-admin="true" />
<!-- 정적 문자열: name="Ann" | 동적 (모든 JS): :age="30" -->
</template>
차이에 주의하세요: 은 리터럴 문자열을 전달하고, ( 사용)은 표현식을 평가합니다 — 숫자, 불리언, 객체, 변수에 필요합니다. 또한 prop 이름은 JS에서는 이지만 템플릿에서는 입니다( → ).
