Vue) 08. Props..

07. 컴포넌트 글 마지막 참고..
..에서 마지막에 말한 데이터 바인딩이 되어있는, 모달창을 컴포넌트로 빼기 위하여 문제되는 부분을 props라는 것을 사용해서 해결하였다.

Props란 )

• 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다.
• 자식에서 받은 데이터는 수정이 불가능! (read-only)

한마디로 모달창을 컴포넌트로 빼기위하여 App.vue에서 사용했던 데이터를 모달 컴포넌트로 보내서 바인딩하면, 이러한 문제는 해결된다!

1. 데이터를 보내기

App.vue의 템플릿 코드 )

아래 코드의 위 모달창이 컴포넌트로 빼기 전 모달창이고, 아래 짧은 코드가 컴포넌트로 뺀 모달창이다.

• 확실히 코드가 심미적으로도 짧아지니까 가독성이 좋아졌다..

<!-- 모달창 -->
<!-- <div class="black-bg" v-if="modalOpen === true">
    <div class="white-bg">
      <img :src="products[clickValue].image" class="room-img" />
      <h3>{{ products[clickValue].title }}</h3>
      <p>{{ products[clickValue].content }}</p>
      <p>{{ products[clickValue].price }} ₩</p>
      <DiscountBanner />
      <button v-on:click="modalOpen = false" class="modal-exit-btn">
        닫기
      </button>
    </div>
  </div> -->
<ModalWindow
	:products="products"
    :modalOpen="modalOpen"
    :clickValue="clickValue"
/>

다시 코드를 보면 알 수 있지만, :products="products"가 바로 v-bind를 이용하여 컴포넌트로 데이터를 보내는 것이다.

:[보내서 사용 할 작명한 데이터 이름]="[보낼 현재 데이터 이름]"이라고 생각하면 덜 헷갈린다.

따라서 모달창에 필요한 데이터 세가지를 부모 App.vue에서 자식 ModalWindow.vue로 보낸것이다.

App.vue의 스크립트 코드 )

export default {
  name: "App",
  // 데이터 저장함 (변수선언)
  data() {
    return {
      products,
      menus: ["Home", "Products", "About"],
      modalOpen: false,
      clickValue: 0,
    };
  },
};

2. 보낸 데이터를 받기

ModalWindow.vue 템플릿 코드 )

<div class="black-bg" v-if="modalOpen === true">
  <div class="white-bg">
    <img :src="products[clickValue].image" class="room-img" />
    <h3>{{ products[clickValue].title }}</h3>
    <p>{{ products[clickValue].content }}</p>
    <p>{{ products[clickValue].price }} ₩</p>
    <DiscountBanner />
    <!-- <button v-on:click="modalOpen = false" class="modal-exit-btn">
        닫기
      </button> -->
  </div>
</div>

애초에 템플릿 부분은 그대로 가져와서 붙인거라 달라진게 없다.

하지만 닫기 버튼을 주석처리 했는데, 이유는 아까 말한 props 데이터는 자식에서 오직 읽기만 가능하다는 점 때문에 주석처리 하였다.

자식 컴포넌트에서 props 데이터를 수정할 수 있게된다면, 아마 에러가 뜰 것이다!!

이러한 문제는 다음 글에서 해결하도록 하겠다!!

ModalWindow.vue 스크립트 코드 )

export default {
  name: "ModalWindow",
  props: {
    products: Array,
    modalOpen: Boolean,
    clickValue: Number,
  },
};

마지막으로 받은 데이터를 스크립트 구문에서 선언해줘야 한다!

props: {} 라는 상자 속에, [작명한 props데이터] : [데이터 형식] 으로 받은 데이터를 선언해야만 끝이난다.