[Composition API] Vue3 Props 사용하기(script setup)

1. 사용 배경

Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 경우 사용합니다.

2. 파일 구조

프로젝트 파일 구조

독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다.

3. 구현 과정

(App.vue와 main.js 파일은 전혀 손대지 않았습니다.)

부모 컴포넌트

부모 컴포넌트인 HomeView.vue 파일에서 자식 컴포넌트인 HelloWorld.vue 파일을 import 해서 사용하는 로직입니다.

<HelloWorld msg="Welcome to Your Vue.js App" />

여기서 msg에 들어가는 내용이 자식 컴포넌트인 HelloWorld.vue 파일로 전달됩니다.

자식 컴포넌트

자식 컴포넌트에서는 defineProps를 import 해주고 props라는 객체를 만들어 전달된 데이터를 받습니다.

<h1>{{ props.msg }}</h1>

위와 같이 template에 전달받은 데이터를 바인딩해 사용합니다.

성공시 화면

이번엔 똑같은 예제를 TypeScript로 구현해 보겠습니다.

부모 컴포넌트

<script setup lang="ts">

lang = "ts" 외에 변경점은 없습니다.

자식 컴포넌트

const props = defineProps<{
  msg?: string;
}>();

Props 선언 시 TypeScript 문법이 적용됩니다.

성공시 화면

4. 결론

가장 간단한 예제로 Props를 구현해 봤습니다.

Vue에는 Vuex라는 상태관리 라이브러리가 존재하지만, 프로젝트의 구조에 따라 Props를 사용해야 하는 경우가 생깁니다.

어느 정도 Props에 대한 개념이 잡히셨다면 아래의 공식 문서에서 심화 예제로 공부해보시는 것을 추천드립니다!

https://vuejs.org/guide/components/props.html