49. The Limitations of Props

• 링크

npm create vue@latest

---

• 프로젝트 링크

---

Props의 제한 사항

이전 강의에서는 컴포넌트에 데이터를 전달하는 방법을 배웠습니다.
이 데이터는 자식 컴포넌트에서 표현식, 지시어 및 메소드에 사용될 수 있지만, 데이터를 업데이트하는 방법에는 몇 가지 제한 사항이 있습니다.
요약하면 다음과 같습니다:

1. App 컴포넌트에서 age 데이터를 Greeting 컴포넌트에도 전달합니다.
   이는 User 컴포넌트에 전달하는 방식과 동일합니다.
2. Greeting 컴포넌트 파일에서 props 속성을 추가하고 age 속성을 수락합니다.
3. Greeting 컴포넌트의 템플릿에서 age가 25세 이상일 때와 그렇지 않을 때를 위한 조건부 메시지를 추가합니다.
4. App 컴포넌트에 버튼을 추가하여 클릭할 때마다 age를 증가시키는 이벤트를 추가합니다.
5. 버튼 클릭으로 age가 변경되면 Greeting과 User 컴포넌트 모두 최신 데이터로 업데이트됩니다.
6. 그러나 자식 컴포넌트 내에서 props 데이터를 직접 변경하려고 하면 오류가 발생합니다.
   부모 컴포넌트가 변경 사항을 인지하지 못하고, 다른 컴포넌트에도 반영되지 않기 때문입니다.
7. 부모 컴포넌트가 데이터를 업데이트하면 자식 컴포넌트의 변경 사항이 덮어씌워집니다.
8. 이 문제를 해결하기 위한 방법은 다음 강의에서 논의할 예정입니다.

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,
         }
      }
   }
</script>

<template>
   <p>App.vue</p>
   <button type="button" @click="age++">Update Age</button>
   <Greeting :age="age" />
   <User :age="age" />
</template>

User.vue

<script lang="ts">
   export default {
      name: 'User',
      props: ['age']
   }
</script>

<template>
   <p>The user is {{ age }} years old</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')