컴포넌트는 재사용 가능하고 독립적인 UI 조각입니다. props는 부모가 자식에게 데이터를 아래로 전달하는 방법입니다 — 자식의 타입이 지정된 읽기 전용 입력입니다.
<!-- 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>
<template>
<UserCard name="Ann" :age="30" :is-admin="true" />
<!-- 정적 문자열: name="Ann" | 동적 (모든 JS): :age="30" -->
</template>
차이에 주의하세요: name="Ann"은 리터럴 문자열을 전달하고, :age="30"(v-bind 사용)은 표현식을 평가합니다 — 숫자, 불리언, 객체, 변수에 필요합니다. 또한 prop 이름은 JS에서는 camelCase이지만 템플릿에서는 kebab-case입니다(isAdmin → :is-admin).
props.name = "Bob"; // ❌ Vue가 경고함 — prop을 절대 변경하지 마세요
데이터는 아래로 흐릅니다(부모 → 자식). 자식은 자신의 prop을 수정해서는 안 됩니다. 무언가를 변경해야 한다면 로컬 복사본을 사용하거나, 이벤트를 발생시켜 부모에게 원본을 변경하도록 요청합니다("props는 아래로, events는 위로"). 이 단방향 흐름은 데이터를 예측 가능하게 유지합니다.
<script setup lang="ts">
const props = defineProps<{ name: string; age?: number }>();
</script>
컴포넌트 + props는 Vue 아키텍처의 기초입니다 — 재사용 가능한 컴포넌트로 UI를 구성하고 props로 설정합니다.
props가 단방향이고 읽기 전용(데이터는 아래로, 이벤트는 위로)이라는 것을 이해하는 것이 Vue 앱을 예측 가능하게 유지하는 핵심 멘탈 모델입니다. prop을 변경하거나 양방향 prop 흐름을 기대하는 것은 전형적인 버그의 원천입니다.
주니어부터 시니어까지 상세한 답변이 포함된 IT 면접 질문 라이브러리.
후원하기