[Vue] 부모가 가진 데이터를 자식이 사용하고 싶을 때 props

컴포넌트를 막 사용하면 안되는 이유!

먼저 지난 번에 배운대로 Modal을 Component로 만들었다.

<template>

    <div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>>{{ 원룸들[누름].content }}</p>

        <p>>{{ 원룸들[누름].price }}원</p>

        <button @click="modalOpen = false">닫기</button>

    </div>

  </div>

</template>

<script>

export default {

    name: 'Modal_',

}

</script>

<style>

</style>

--> 여기서 문제는 '원룸들', '누름', 'modalOpen'이라는 데이터는 부모인 App.vue에 있는 데이터기 때문에 Modal.vue에서 사용할 수가 없다. 그렇다면 데이터를 똑같이 복사해오면 되지 않는가? 절대 안된다. 데이터의 변질 위험이 있기 때문에 데이터는 한 곳에서만 관리를 해야한다. 그래서 사용하는 것이 props 문법이다!

 

App.vue에서 Modal 컴포넌트에 데이터를 보낸다.

<Modal :원룸들="원룸들" :누름="누름" :modalOpen="modalOpen" />

--> : 을 사용해도 되고, v-bind라는 문법을 사용해도 된다. 이렇게 하면 App.vue에 있는 데이터를 Modal 컴포넌트에 보낸다는 의미이다.

 

Modal.vue에서는

export default {

    name: 'Modal_',

    props: {

        원룸들 : Array,

        누름 : Number,

        modalOpen : Boolean,

    }

}

--> props라는 문법을 사용해서 App.vue에서 보낸 데이터를 등록한다. 여기서 왼쪽은 데이터 이름, 오른쪽은 데이터형식 이름이다.

그런데 이렇게 쓰면 html에서 에러가 발생한다.

<div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

        <h4>{{ 원룸들[누름].title }}</h4>

        <p>>{{ 원룸들[누름].content }}</p>

        <p>>{{ 원룸들[누름].price }}원</p>

        <button @click="modalOpen = false">닫기</button>

    </div>

</div>

--> @click="modalOpen=false" 이 부분에서 에러가 생기는데, 그 이유는 props는 read-only기 때문에 받아온 데이터를 수정하면 안되기 때문이다. 잠시 주석처리하자.

그러면 원래대로 모달창이 뜨게 된다.

 

결론 : 컴포넌트를 사용하면 props 때문에 코드가 복잡해질 수 있기 때문에 아무 곳이나 컴포넌트를 사용하지 말고 잘 생각해야한다.

 

Q. 애초에 Modal.vue에 데이터 만들면 되지 않는가?

--> 되긴 하지만 만약에 그 데이터를 부모도 사용한다면? 부모 컴포넌트에 데이터를 만들어야 된다. 
     데이터를 사용하는 곳들 중 최상위 컴포넌트에 만드는 것이 가장 좋다. (일종의 법칙)
     왜냐하면? 데이터를 아래로 보낼 때는 props를 사용하면 되지만 위로 보내는건 까다롭고 어렵기 때문이다.

 

* props 보낼 때 다양한 자료형 입력 가능하다

작명="문자자료"
:작명="숫자자료"
:오브젝트="오브젝트이름"

 

출처 : 코딩애플