[VueJS] Vue3 CompositionAPI에서 Props 사용(+TypeScript)

vue3에서 compositionAPI 방식으로 props를 사용하는 방법이 좀 다양하다.

사용할 때마다 자꾸 헷갈려서 작성하게 됐다...

자세한 설명은 공식문서에 있으니 본문 하단에 링크를 첨부하고 종류와 소스로만 간단하게 작성할 생각이다.

 

첫 번째로 optionsAPI방식과 유사한 방식으로

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number,
  sub: { type: Boolean, default: false }
})
</script>

이런 방법이 있다.

defineProps의 경우 defineEmits와 같이 별도로 Import 할 필요 없고 바로 사용이 가능하다.

 

두 번째 방법으로는 순수 타입으로 props를 정의하는 방법으로 좀 더 간결하게 작성이 가능하다.

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

 

세 번째로는 interface를 이용한 props 정의하는 방법이다.

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

 

하지만 첫 번째 방법을 쓰기엔 compositionsAPI를 쓰는 것 같지도 않고, 타입스크립트를 쓰는 것 같지 않다 보니 보통 세 번째 방법을 사용했었다. props가 정말 적을 경우에는 두 번째 방법을 사용했다.

그런데 첫 번째 방법을 제외하고 두, 세 번째 방법은 default 값을 지정할 수 없다.

 

default 값을 지정하기 위해선 withDefaults를 사용해야 한다.

<script setup lang="ts">
 interface Props {
    message: string;
    time?: string;
    align?: 'start' | 'center' | 'end';
    textColor?: string;
    backgroundColor?: string;
  }
  const props = withDefaults(defineProps<Props>(), {
    message: '',
    time: '',
    align: 'start',
    textColor: ' #85ce61',
    backgroundColor: '#1c2518',
  });
</script>

이런 식으로 사용할 수 있다.

 

전에 처음 vue3를 접하고 공식문서에서 props에 대한 글을 봤을 땐 이 withDefaults라는 항목을 못본 것 같았는데... 오늘 다시 보니 있다.

 

공식 문서 링크

https://vuejs.org/guide/typescript/composition-api.html#typing-component-props

TypeScript with Composition API | Vue.js