51. Validating Props

링크open in new window

npm create vue@latest

프로젝트 링크

이 강의에서는 컴포넌트에서 props의 값들을 검증하는 방법에 대해 배우게 됩니다.
요약하면 다음과 같습니다:

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.
이 데이터의 값들을 검증하여 애플리케이션을 디버깅하는 데 도움이 됩니다.
User 컴포넌트에서 age라는 prop을 받고, 이를 숫자 값으로만 받아들이도록 유형을 검증합니다.
Props 객체 내에서 각 prop에 대한 검증 규칙을 설정할 수 있습니다.
예를 들어, type, required, default 등의 키를 사용합니다.
type은 prop의 데이터 유형을 지정하며, 여러 유형을 배열로 지정할 수도 있습니다.
required는 해당 prop이 필수적인지 여부를 나타냅니다.
default는 prop에 기본값을 설정합니다.
validator 함수를 사용하여 사용자 정의 검증을 수행할 수 있습니다.
이 함수는 prop의 값을 받아 true 또는 false를 반환합니다.
예를 들어, age가 130세 미만인지 검증하여 그렇지 않은 경우 오류 메시지를 출력합니다.
validator 함수는 컴포넌트 인스턴스가 생성되기 전에 실행되므로, 컴포넌트의 data, computed, methods에 접근할 수 없습니다.

이 강의를 통해 props의 type(유형), required(필수 여부), default(기본값), validator(사용자 정의 검증) 등 다양한 방법으로 props를 검증하는 방법을 배웠습니다.

App.vue

<script lang="ts">
   import Greeting from "@/components/Greeting.vue";
   import User from "@/components/User.vue";
   export default {
      name: 'App',
      components: {
         Greeting,
         User,
      },
      data() {
         return {
            age: 20,
         }
      },
      methods: {
         updateAge(num: number) {
            this.age += num;
         }
      }
   }
</script>

<template>
   <p>App.vue</p>
   <Greeting :age="age" />
   <User :age="age" @age-change="updateAge" />
</template>

User.vue

<script lang="ts">
  export default {
    name: 'User',
    props: {
      age: {
        type: Number,
        required: true,
        // default: 20,
        validator(value: number) {
          return value < 130;
        }
      }
    },
    emits: ['age-change'],
    computed: {
      ageDoubled() {
        return this.age * 2;
      }
    },
    methods: {
      onClickAge() {
        this.$emit('age-change', 3)
      }
    }
  }
</script>

<template>
  <button type="button" @click="onClickAge">Update Age</button>
  <p>The user is {{ age }} years old</p>
  <p>{{ ageDoubled }}</p>
</template>

<style scoped>

</style>

Greeting.vue

<script lang="ts">
   export default {
      name: 'Greeting',
      props: ['age'],
      data() {
         return {
            msg: 'Hello World!'
         }
      }
   }
</script>

<template>
   <p v-if="age > 25">{{ msg }}</p>
   <p v-else>You must be 25 years or older to view this message</p>
</template>

<style scoped lang="scss">
   p:hover {
      color: darken(#cc4444, 15%);
   }
</style>

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from '@/App.vue';
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

# 51. Validating Props

51. Validating Props