[Udemy Vue 완벽가이드 Section8] 97. 동적 props값 사용하기

물론 props의 값은 String이 아닐 수 있다.

다른 HTML 요소처럼 props도 동적 값에 바인딩할 수 있다.

 

# 기존 props 값 : 항상 string으로 전달된다.

  props: {
    isFavorite: {
      type: String,
      required: false,
      default: '0',
      validator: function(value) {
        return value === '1' || value === '0';
      }
    },
  },

 

위 코드를 보면, isFavorite은 현재 1 또는 0으로 동작한다. (validator함수 참고)

딱 두 개의 값만 사용하니 사실 String 보다는 Boolean이 더 적합하다. 그러니 type을 String이 아닌 Boolean으로 바꾸자.

그럼 validator함수를 지워도 된다. 어차피 Boolean엔 다른 값은 없고, true/false만 있으므로.

그리고 default 값은 기존값인 '0'에서 'false'로 바꾸자.

  props: {
    isFavorite: {
      type: Boolean,
      required: false,
      default: false,
      // validator: function(value) {
      //  return value === '1' || value === '0';
      //}
    },
  },

 

하지만 정작 부모 컴포넌트(App.vue)에서 is-favorite값을 전달할 때는, 이걸 true/false로 설정할 수 없다.

왜냐하면 props를 보낼때 항상 string으로 전달되기 때문이다.

<friend-contact
   name="Julie Johns"
   phone-number="01396959459"
   email-address="julie@localhost.com"
   is-favorite="true" // 여기는 항상 text가 온다. 즉, String타입의 true가 된다.
></friend-contact>

 

# 동적 props 값 전달방법 : v-bind

v-bind로 바인딩하자. 

다른 HTML 속성을 바인딩하는것처럼, props도 바인딩할 수 있다.

문자열이 아닌 JS값이 필요한 props가 있다면, 해당 값 전달에 v-bind나 축약어(:)를 사용하면 된다.

물론 JS 표현식을 실행하거나, 메서드를 호출할 수도 있다. 이렇게 문자열이 아닌 값을 전달하는데 써먹을 수 있다.

ex: :is-favorite="1 == 1"

 

 

## 동적 props 값 전달의 유용함 : v-for

props를 동적으로 바인딩하는건 다른 데서도 유용하게 쓰인다.

문자열이 아닌 값을 전달하는데도 물론 유용하지만, 이러한 컴포넌트를 더 동적으로 만드는 데에도 유용하다.

 

<ul>
  <friend-contact
    name="Manuel Lorenz"
    phoneNumber="01234 78992"
    email-address="manuel@localhost.com"
    :isFavorite="true"
  ></friend-contact>
  <friend-contact
    name="Julie Johns"
    phone-number="01396959459"
    email-address="julie@localhost.com"
    :isFavorite="false"
  ></friend-contact>
</ul>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
          isFavorite: true,
        },
        {
          id: "julie",
          name: "Julie Johnes",
          phone: "0456 35353 93",
          email: "julie@localhost.com",
          isFavorite: true,
        },
      ],
    };
  },
}
</script>

App.vue 파일 내에 data로 friends가 있다.

위 코드처럼 friend-contact 컴포넌트를 두번 사용하여 일일이 props를 전달하지 않고, v-for를 써도 좋다.

자체 컴포넌트를 반복하고, 각 루프를 반복할 때마다 다른 data를 전달한다.

 

 

<ul>
  <friend-contact
    v-for="friend in friends"
    :key="friend.id"
    :name="friend.name"
    :phoneNumber="friend.phone"
    :email-address="friend.email"
    :isFavorite="true"
  ></friend-contact>
</ul>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: "manuel",
          name: "Manuel Lorenz",
          phone: "0123 45678 90",
          email: "manuel@localhost.com",
          isFavorite: true,
        },
        {
          id: "julie",
          name: "Julie Johnes",
          phone: "0456 35353 93",
          email: "julie@localhost.com",
          isFavorite: true,
        },
      ],
    };
  },
}
</script>

기본 HTML 요소에서 사용했듯이, 컴포넌트에도 v-for, v-if를 사용할 수 있다.

 

# 컴포넌트에 v-for 사용 시, 유의할 점

friend-contact 컴포넌트에서 friends를 loop시키는데 한 가지 중요한 규칙이 있다.

바로, key를 추가해줘야 한다는 것. v-for에서 아주 중요한 요소이다.

- 커스텀 컴포넌트 내에서 v-for을 사용하는 경우, 반드시 key를 추가해야한다.

- 전달받은 컴포넌트(여기서는 friend-contact 컴포넌트) 내에서는 props 프로퍼티에 key를 추가할 필요는 없다. Vue가 자동으로 처리해준다.

 

 

이렇게 friend마다 각기 다른 data를 전달하기 위해 모든 props값을 동적으로 바인딩했다.

 

이로써 v-for로 생성된 두 컴포넌트가 존재하게 된다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.