props

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!

부모가 가진 데이터를 자식이쓰고 싶으면 props로 전해주셈

 

 

저번 시간에 <Modal/> 컴포넌트를 만들어봤는데 모달창이 잘 안뜹니다.

데이터바인딩에 문제가 생겨서 그렇습니다.

모달창 만들어둔 Modal.vue 코드를 보시면.. 

 

<div class="black-bg" v-if="모달창열렸니 == true">
  <div class="white-bg">
    <img :src="원룸들[누른거].image" style="width:100%">
    <h4>{{ 원룸들[누른거].title }}</h4>

(생략)

대충 원룸들, 누른거 이런 변수를 데이터바인딩 잔뜩해놨는데

원룸들이라는 데이터가 Modal.vue안에 없어서 문제가 생긴겁니다.

(데이터바인딩 하려면 데이터가 밑에 있어야합니다)

 

그럼 어떻게합니까. 원룸들이라는 데이터를( APP.vue - 부모) Modal.vue 파일에도 복사 붙여넣기 해주면 되나요? 

그건 안됩니다. 데이터를 사본을 만들기 시작하면 그 데이터가 업데이트사항이 생겼을 때 복사본들에 어떻게 전부 반영시킬겁니까.

미래를 생각해봤을 때 그건 하면 안될 짓입니다. 

 

옳은 방법은 App.vue에 있던 원룸들이라고 저장해둔 데이터를 전송해서 쓰는 것입니다.

하위컴포넌트로 데이터를 전송하려면 props라는 문법으로 Modal.vue에 보내면 됩니다. 

props 보내는 것도 3-step이 있습니다.

1. 보내고 2. 등록하고 3. 써야합니다. 

 

 

 

잠깐 용어정리를 하자면

App.vue 안에 Modal.vue를 집어넣어서 쓰고 있습니다.

이 경우 Modal은 하위 또는 자식 컴포넌트

App은 상위 또는 부모 컴포넌트라고 비유해서 부릅니다.

 

 

 

 

 

자식이 부모가 가진 데이터 쓰려면 props

 

부모 -> 자식 이렇게 props라는 문법으로 전송해주어야 사용가능합니다.

props 쓰려면 이것도 3-step이 있습니다. 

1. 보내고 2. 등록하고 3. 쓰면 됩니다. 3번은 생략해도 에러는 안남 

 

 

원룸들이라는 App.vue에 있는 데이터를 Modal.vue로 보내봅시다.

 

(App.vue)

<Modal :원룸들="원룸들" />

① 이렇게 데이터바인딩 문법쓰시면 데이터를 <Modal>로 보낼 수 있습니다.

 

<Modal :작명="하단의데이터이름" /> 이런 식으로 써주면 됩니다. 근데 귀찮아서 이름 두개 통일함

(그래서 콜론 : 이거 역할은 2개입니다. 데이터바인딩 혹은 props 전송임)

 

(Modal.vue)

<script>
  export default {
    name : 'Modal',
    props : {
      원룸들 : Array,
    }
  }
</script>

② 자식컴포넌트는 데이터를 받으면 props로 등록하십시오.

props : {} 열고 거기다가 아까 작명한 { 데이터이름 : 자료형 }

적어주면 됩니다. 

자료형엔 Array, Object, String, Number 이런 것들을 적으면 됩니다. 틀려도 됩니다.에러는 안뜨고

자료형 확인하려는 공간입니다.

 

③ props 등록한 것들은 HTML안에서 데이터바인딩으로 자유롭게 사용가능합니다.

 

그래서 원룸들, 누른거, 모달창열렸니 이런 데이터들을 App.vue에서 Modal.vue로 한번 보내보십시오.

잘 보냈으면 모달창이 동작할겁니다.

하지만 닫기버튼은 주석처리합시다. 아마 props 수정하지마세요~ 이런 에러가 뜰겁니다. 

props는 그냥 받아서 사용만 하는 read-only 데이터처럼 취급하셔야지 수정하시면 안됩니다. 에러남 

아래 등호처럼 재할당 하면 안됩니디!

 

 

Q. 애초에 Modal.vue에다가 원룸들, 누른거 이런거 데이터 저장해두면 안되나?

 

props가 귀찮기 때문에

App.vue에다가 만들지말고 애초에 Modal.vue 파일에다가 data(){} 열고

여기에 데이터들 저장해놓고 쓰면 안되냐는 소리입니다. 

 

내가 이 데이터를 Modal.vue 안에서만 쓸 거라고 자신하면 거기다가 만드셔도 됩니다.

하지만 데이터를 만들 때 원칙이 있는데

"데이터를 사용하는 컴포넌트들 중 최상위 컴포넌트에다가 데이터를 만들어놔야함"

이걸 지켜서 만들어주시길 바랍니다.

왜냐면 데이터는 위로 전송하는게 복잡하고 추적이 어렵기 때문입니다.

귀찮으면 그냥 모조리 App.vue에 저장해놓으셈 그것도 나쁘지 않습니다. 

 

 

오늘의 교훈 :

컴포넌트로 많이 쪼개면 props 보내는거 귀찮으니까

만들기 전에 "만들면 이득이 있을까" 라는 생각을 해보고 만들도록 합시다. 

 

<template>
  <div class="black-bg" v-if="모달창열렸니==true">
    <div class="white-bg">
      <img :src="원룸들[누른거].image" style="width:50%;" alt="">
      <h4>{{원룸들[누른거].title}}</h4>
      <p>{{원룸들[누른거].price }}</p>
      <p>{{원룸들[누른거].content }}</p>
     <!-- <button @click="모달창열렸니=false">닫기</button> -->
    </div>
  </div>
  
</template>

<script>

export default {
    name: 'Modal',
  props: {
    원룸들: Array,
    누른거: Number,
    모달창열렸니:Boolean,


  }
   
}
</script>

<style>
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding : 20px;
}
.white-bg{
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}
</style>

 

 

🍎🍎🍎

카드 컴포넌트화 하기

<template>
    <div v-for="(room,i) in 원룸들" :key="i">
    <img :src="room.image" class="room-img" alt="">
    <h4>{{room.title}}원룸</h4>
    <p>{{room.price}}</p>
  </div>
</template>

<script>
export default {
    name: 'Card',
    props: {
        원룸들: Array,
        누른거: Number,
        모달창열렸니:Boolean,
    }

}
</script>

<style>
.room-img{
  width : 100%;
  margin-top: 40px;
}
</style>