부모 입력을 읽기 전용 props로 선언합니다.
defineProps로 컴포넌트 입력의 이름, 타입, 필수 여부와 기본값을 선언합니다. TypeScript를 쓰면 컴파일 시 계약을 더 정밀하게 검증할 수 있습니다.
props는 단방향이므로 자식에서 직접 변경하지 않고 로컬 초깃값이 필요하면 의도를 문서화합니다.
객체 기본값은 인스턴스 간 공유를 피하도록 factory 함수가 필요한 Options API 규칙을 이해합니다.
props를 직접 변경하면 다음 부모 렌더에서 덮이고 데이터 흐름을 추적하기 어렵습니다.
로컬 프로젝트에서 확인해보세요level prop과 기본값을 추가하세요.
<script setup>
const props = defineProps({
title: { type: String, required: true },
completed: { type: Boolean, default: false },
});
</script>
<template>
<main>
<h1>{{ props.title }}</h1>
<p>{{ props.completed ? "완료" : "학습 중" }}</p>
</main>
</template>