[Vue] props

0. 들어가기 전에...

컴포넌트화가 전혀 되어있지 않은 회사 코드를 조금씩 컴포넌트화를 시켜가며 vue를 효율적으로 사용하도록 노력하고 있다.

평소 하던대로 부모 컨포넌트에서 자식 컨포넌트로 props를 통해 데이터를 넘겨주면 된다고 생각했었다.
넘겨주는 데이터는 아래와 같은 객체 배열이라 배열로 type을 array로 두었다.

tag = [
  {
    text: tag1,
    value: 1
  },
  {
    text: tag2,
    value: 2
  },
  ...
]

기능은 잘 작동하나 갑자기 아래와 같은 경고창이 신경을 거슬리게 했다.

vue.runtime.esm.js:5278 [Vue warn]: Invalid prop: type check failed for prop "tagList". Expected Array, got Object

object로 보내라길래 type을 object로 바꾸니까 이젠 array를 뱉으란다.. 환장...
[Vue warn]: Invalid prop: type check failed for prop "tagList". Expected Object, got Array

type을 여러개를 허용해주니 경고창이 없어졌다.

잘 알고 있는줄 알았지만 기초적인것 밖에 몰랐다...라는 생각이 들어 props 대해서 다시한번 공부 할 겸 정리하고자 한다.

1. Prop 대소문자 구분 (camelCase vs kebab-case)

• HTML attribute는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 읽는다.
• 따라서, 케밥 케이스로 사용해야 올바르게 동작한다.

Vue.component('blog-post', {
  // JavaScript에서의 camelCase
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- HTML에서의 kebab-case -->
<blog-post post-title="hello!"></blog-post>

2. Prop 타입

• String, Number, Boolean, Array, Object, Date, Function, Symbol
• 커스텀 생성자 사용
  확인은 instanceof 를 통해 이루진다. ex, 아래와 같은 생성자 함수가 선언되어 있다면:

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

아래와 같이 작성함으로써:

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

author prop이 new Person으로 생성된 값인지 확인할 수 있다.

3. 정적 & 동적 prop 전달하기

• 정적 전달

	<vue-test title="now Vue Test"></vue-test>

• 동적 전달(v-bind 를 이용하여 동적인 prop을 전달)

	<vue-test :title="data.title"></vue-test>

4. 단방향 데이터 흐름

prop들은 부모와 자식 사이에 단방향으로 내려가는 바인딩형태를 취한다.(부모 -> 자식)
자식의 데이터가 부모에게 전달되는 것을 막는 것은 자식 요소가 의도치 않게 부모 요소의 상태를 변경함으로써 앱의 데이터 흐름을 이해하기 어렵게 만드는 일을 막기 위해서이다.

부모 컴포넌트가 업데이트될 때 마다 자식 요소의 모든 prop들이 최신 값으로 새로고침 된다.

prop을 직접 변경하고 싶을 경우
1. prop은 초기값만 전달하고, 자식 컴포넌트는 그 초기값을 로컬 데이터 속성으로 활용하고 싶은 경우
해당 경우에는 로컬 데이터 속성을 따로 선언하고 그 속성의 초기값으로써 prop을 사용하는 것이 가장 바람직하다.

  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }

2. 전달된 prop의 형태를 바꾸어야 하는 경우
   해당 경우에는 computed 속성을 사용하는 것이 가장 바람직합니다.

  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

5. Prop 유효성 검사

props: {
  title: {
    type: [String,Number]  // 여러가지 타입 허용
    required: true         // 필수로 전달 받아야함
    default: 100		   // 부모 컴퍼넌트에서 보내주는 값이 없을시 기본값으로 대체
  }
}

props: {
  title: {
    type: Object,
    default: () => {}      // 배열이나 함수의 기본 값은 항상 함수로부터 반환되어야 함(ex) {}, [])
  }
}

props: {
  a: {
    type: Array,
    required: true,
    default: () => { return [1, 2, 3, 4] },
    validator: (val) => { 	// validation
      return val.length > 5
    }
  }
}