vue - component, props

Chapter 1 PROPS

컴포넌트, 부모-자식 데이터 교류인 props에 대해 배워보자.

props는 react와 사용법이 일맥상통한다.

먼저, 부모 컴포넌트에 props로 받을 인자를 적어준다.

<friend-contact
        name="Manuel Lorenz"
        phone-number="012 123 456"
        email-address="manuel@localhost.com"
      ></friend-contact>
      <friend-contact
        name="Julie Jones"
        phone-number="013 235 789"
        email-address="julie@localhost.com"
      ></friend-contact>

자식 컴포넌트에는 아래와 같은 방식으로 props : []를 추가한다.

export default {
  props: ["name", "phoneNumber", "emailAddress"],
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "012 123 456",

---

• 주의할 점

부모 컴포넌트에는 케밥 케이스를 사용했다. (ex. phone-number)
하지만, 자식 컴포넌트에는 카멜 케이스를 사용했다. (ex. phoneNumber)
이는, html과 vue의 인식차이 때문에 반드시 이렇게 해야한다.
props에 카멜케이스를 적용하고, html에 케밥케이스를 적용하면 알아서 인식이 된다.

---

마지막으로, 부모에게서 받아온 props를 자식 컴포넌트에 사용하면 된다.
획기적인 것은 props.phoneNumber 와 같이 사용하는 것이 아닌 phoneNumber만 쓰면 된다는 것.

<template>
  <li>
    <h2>{{ name }}</h2>
    <button @click="toggleDetails">
      {{ detailsAreVisible ? "Hide" : "Show" }} Details
    </button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong>{{ phoneNumber }}</li>
      <li><strong>Email:</strong>{{ emailAddress }}</li>
    </ul>
  </li>
</template>

이렇게 사용하면 된다!

---

Chapter 2 PROPS의 불변성

props는 불변성을 지켜야한다.
불변성, React를 다룰 때도 많이 들었던 단어이다.
말 그대로 변하지 않는 성질.
props가 불변성이 지켜지지 않으면 오류가 발생한다.

예시를 들어보자.
먼저, 부모 컴포넌트에 is-favorite라는 props를 만들어준다.

<friend-contact
        name="Manuel Lorenz"
        phone-number="012 123 456"
        email-address="manuel@localhost.com"
        is-favorite="1"
      ></friend-contact>
      <friend-contact
        name="Julie Jones"
        phone-number="013 235 789"
        email-address="julie@localhost.com"
        is-favorite="0"
      ></friend-contact>

그리고 자식 컴포넌트에 props를 받아오고
props(isFavorite) 를 변경해주는 methods를 만든다.

<button @click="isFavoriteToggle">FavoriteToggle</button>
props: ["name", "phoneNumber", "emailAddress", "isFavorite"],
methods: {
    isFavoriteToggle() {
      if (this.isFavorite === "1") {
        this.isFavorite = "0";
      } else {
        this.isFavorite = "1";
      }
    },

이 상태라면 내가 버튼을 눌렀을 때, props로 받아온 isFavorite 값이 1, 0을 왔다갔다 할 것이다.
즉, props의 불변성이 깨지는 것이다.

Unexpected mutation of "isFavorite" prop 오류가 뜨는 것을 확인했다.

Vue는 Unidirectional data flow, 단방향 데이터 흐름이란 개념을 사용하기 때문이다.

그렇다면 props는 절대 바꿀 수 없는 것인가? 받아온 그대로만 사용해야 할까?

정답을 먼저 말하자면 '아니다'.

위 처럼 props를 바꾸는 것은 app.vue의 data 까지 바꾸지는 못하기 때문에 app.vue의 data를 바꾼다면 props의 값을 바꾸는 것도 가능하다.

 data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: "manuel",
        name: "Manuel Lorenz",
        phone: "012 123 456",
        email: "manuel@localhost.com",
      },
      **favorite: this.isFavorite,**
    };
  },
  **methods: {
    isFavoriteToggle() {
      if (this.favorite === "1") {
        this.favorite = "0";
      } else {
        this.favorite = "1";
      }
    },**
  }

위에서 ** 처리한 부분을 보자.

새로운 data를 만들고, isFavorite를 저장했다.
그리고 props인 isFavorite를 바꾸는 methods가 아닌, favorite를 바꾸는 메소드를 사용한다.

이렇게 처리하면, props가 아닌 data가 바뀌는 것이다.
이젠 template부분에도 favorite data를 사용하면 된다.

오류 없이, 토글 버튼을 누르면 이름옆에 favorite가 뜨는 것을 확인.

정리

• 부모 컴포넌트에는 케밥 케이스를 사용, 자식 컴포넌트에는 카멜 케이스를 사용.
  html과 vue의 인식차이 때문에 반드시 이렇게 해야한다.
• props는 불변성을 지켜야한다. 하지만, data를 통해 app.vue에서 관리한다면 변경할 수 있다.
  (props를 바꾸는 것이 아닌, data를 바꾸는 개념으로 접근)

👏Github