📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1

📜 Chapter

defineModel()

defineEmits()

defineProps()

• defineProps()
• script setup에서 사용
• Props 정의
• Vue 3의 <script setup> 구문에서 컴포넌트의 인터페이스(Props와 Emits)를 정의하는 데 사용되는 컴파일러 매크로(Compiler Macros)이다.
• 함수처럼 보이지만, 실제로는 런타임에 호출되는 일반 함수가 아니라, Vue 컴파일러가 <script setup>을 처리할 때 사용하는 빌드 시간 전용 선언이다.
• defineProps는 컴포넌트가 부모로부터 받을 수 있는 속성(Props)을 선언한다.

사용법

<script setup>
// 런타임 값 추론을 위한 객체 전달 (JavaScript 방식)
const props = defineProps({
  // 타입: String, 필수 여부: 필수
  title: {
    type: String,
    required: true
  },
  // 타입: Number, 기본값: 0
  count: {
    type: Number,
    default: 0
  }
});

// props.title 또는 props.count와 같이 내부에서 사용
console.log(props.title);
</script>

• 타입 기반 선언 (TypeScript 권장 방식)
  • TypeScript 환경에서는 타입 리터럴을 사용하여 더 간결하고 강력하게 Props를 선언하는 것이 권장된다.

<script setup lang="ts">
// 💡 defineProps 뒤에 제네릭(Generic)으로 타입을 전달
const props = defineProps<{
  title: string;
  count?: number; // ?를 사용하여 선택적(optional) 속성 정의
}>();

// props.title은 string 타입으로 자동 추론됨
</script>