[Vue.js] Vue 프롭스(props) 이해와 활용하기

프롭스(props)란?

Vue.js에서 프롭스(props)는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 데 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하여 자식 컴포넌트에서 사용할 수 있도록 합니다. 이를 통해 컴포넌트 간의 통신을 할 수 있습니다.

예제

아래 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 이름과 나이를 전달하는 예제를 보여줍니다.

부모 컴포넌트 (ParentComponent.vue):

<template>
  <div>
    <ChildComponent :name="name" :age="age" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: '홍길동',
      age: 30
    };
  }
}
</script>

자식 컴포넌트 (ChildComponent.vue):

<template>
  <div>
    <p>이름: {{ name }}</p>
    <p>나이: {{ age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    age: Number
  }
}
</script>

설명

• 부모 컴포넌트에서 ChildComponent를 호출할 때 :name과 :age를 통해 데이터를 전달합니다.
• 자식 컴포넌트에서는 props 속성을 사용하여 전달받은 데이터를 받습니다. 이때, name과 age는 자식 컴포넌트에서 사용할 수 있는 변수가 됩니다.

주요 특징

• 단방향 데이터 흐름: 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있습니다.
• 읽기 전용: 자식 컴포넌트에서 전달받은 프롭스를 직접 수정할 수 없습니다. 수정해야 할 경우 부모 컴포넌트에서 데이터를 변경해야 합니다.