[Vue.js] 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송하는 문법 props

웹 애플리케이션을 제작할 때 재사용 가능한 부분을 독립적으로 구축 할 수 있게 해주는 것을 컴포넌트라고 부른다.

[Vue.js] 컴포넌트(Component)

 

App.vue 파일에서 Child.vue 컴포넌트를 등록하면 Child.vue의 부모 컴포넌트는 App.vue가 되는 것이다.

 

이때, 부모 컴포넌트(App.vue)에 등록된 데이터를 자식 컴포넌트(Child.vue)가 사용 하고 싶을 부모에서 데이터를 자식 컴포넌트에 데이터를 전송해주고, 자식 컴포넌트에서 전송한 데이터를 등록해줘야하는데 그때 사용하는 것이 Vue의 props이다.

 

 

부모컴포넌트의 데이터를 자식 컴포넌트에서 사용하기

예제 내용) 부모 컴포넌트(App.vue)에 등록한 'MyData'라는 데이터를 자식 컴포넌트(Child.vue)로 보내서 사용하기.

 

1. 부모 컴포넌트에 등록된 데이터를 자식 컴포넌트에 v-bind하여 보낸다.

 

1-1. 자식컴포넌트로 데이터를 v-bind로 보낼때는 <컴포넌트이름 :데이터작명="하단데이터이름" />  형식으로 보내며 형식적으로는 좌측의 데이터작명은 하단의 데이터이름과 통일한다.

//(App.vue - 부모 컴포넌트)

<template>
	<!-- 하단 'MyData' 를 자식컴포넌트에 v-bind -->
	<Child :MyData="MyData" />
</template>

<script>

// 자식 컴포넌트를 import 로 가져오기
import Child from "./component/Child.vue";

export default {
  name : 'App',
    data() {
        return {
            MyData: "데이터입니다.",
        }
    },
    components: {
        Modal: Modal,	
    }
}
</script>

 

 

 

2. 자식 컴포넌트는 부모 컴포넌트로 데이터를 받았으면 데이터를 사용 할 수 있도록 props로 등록해준다.

 

2-1. "props: {}" 항목을 만들고, 항목안에 부모컴포넌트에서 데이터를 보낼 때 작명한 데이터 이름과 자료형을 기입.

자료형 예시) String,Number,Array,Boolean 등...

 

2-2. props항목에 등록한 데이터는 HTML 안에서 데이터 바인딩하여 데이터 출력이 가능하다. 

다만, 만약 데이터를 바꾸는 처리를 하고싶을땐 props에서 등록 한것 만으로는 불가능하다. 이는 커스텀 이벤트 문법을 사용해야한다. (이는 다음 포스트에서 올리는걸로...)

 

( Child.vue -자식 컴포넌트 )
<template>
	<h2> {{ MyData }} </h2>
</template>

<script>
  export default {
    name : 'Child',
    
    //props 항목 생성 후 작명한 데이터 이름 및 자료형 등록
    props : {
      MyData : String,
    }
  }
</script>

 

 

위의 방식 처럼 데이터를 전송할 수 있는데 이는 Restful API 형식으로 받아온 데이터도 자식 컴포넌트에게 전달 하는 것이 가능하다.

 

이런 과정이 귀찮은데 자식 컴포넌트에 데이터를 저장하면 안될까?

가능하다. 그러나 한가지 조건이 전제 된 경우만 가능하다. 

 

자식 컴포넌트에서 선언한 데이터가 '자식 컴포넌트 내부'에서만 사용 할 것 이라면 자식컴포넌트에서 data() 항목을 만들어 데이터를 저장 & 선언 해도 상관없다.

 

그런 경우가 아니라면 데이터를 만들 때의 기본적인 원칙을 지켜야한다.

"데이터를 사용하는 컴포넌트들 중 최상위 컴포넌트에 데이터를 저장해야한다." 라는 것이다.

 

이유는 데이터를 부모 컴포넌트에서 자식으로 보내는건 어렵지 않다. 위의 과정과 같이 1. 전송하고 2.props로 받아오고.

그러나 자식에서 선언된 데이터를 부모에게 보내는건 방식도 복잡하고 코드도 난잡해지고 데이터 추적하기가 어려워져서 추후 유지보수가 매우매우 힘들어지기 때문이다.

 

오히려 데이터 구조 설계를 어떻게 해야 할 지 모르겠으면 데이터를 전부 App.vue(최상위 부모컴포넌트)에 저장해두는것도 방법이다.

 

그래도 여전히 props를 사용하기 싫다면 Vuex(상태 중앙 집중저장소)를 사용해야한다. 

(Vuex도 추후 포스트 예정)