[vue] props에 대한 설명

Vue의 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 속성입니다. 컴포넌트 간 데이터를 공유할 때 매우 중요한 역할을 합니다.

기본 사용법

부모 컴포넌트에서 데이터를 전달할 때 HTML 속성처럼 작성

<child-component title="안녕하세요"></child-component>

자식 컴포넌트에서는 props 옵션으로 해당 데이터를 받을 준비를 합니다

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'], // 부모에서 전달된 props를 정의
};
</script>

Props에 대한 주요 특징

1. 단방향 데이터 흐름

부모 -> 자식으로 데이터가 전달되고, 자식은 이 데이터를 직접 수정하면 안 됩니다. 만약 수정이 필요하다면, 자식에서 이벤트를 발생시키거나 computed를 사용해야 합니다.

2. 유효성 검사

props는 단순히 문자열 배열로 정의할 수도 있지만, 더 복잡한 설정이 가능해. 예를 들어 타입, 필수 여부, 기본값 등을 설정할 수 있습니다

props: {
  title: {
    type: String,    // 타입 지정
    required: true,  // 필수 여부
    default: '기본 제목', // 기본값
  },
  count: {
    type: Number,
    validator: value => value >= 0, // 유효성 검사
  },
}

//기본값은 함수로도 지정할 수 있습니다:
props: {
  items: {
    type: Array,
    default: () => [], // 빈 배열을 기본값으로
  },
}

Props 전달 시 주의점

1. CamelCase vs Kebab-Case

JavaScript에서는 props를 camelCase로 정의하지만, 
HTML에서는 kebab-case로 전달해야 해야합니다.

props: ['myMessage']

<child-component my-message="안녕하세요"></child-component>

2. Immutable

자식 컴포넌트에서 props 값을 직접 변경하면 Vue에서 경고가 발생합니다. 
필요하다면 복사본을 만들어서 사용하는 게 좋습니다

props: ['initialValue'],
data() {
  return {
    mutableValue: this.initialValue, // 복사본 생성
  };
}

Props의 활용

1. 동적 데이터 바인딩

<child-component :title="parentTitle"></child-component>

2. 객체로 한 번에 전달

<child-component v-bind="propsData"></child-component>