Vue 컴포넌트 / 컴포넌트 간 통신

Vue 컴포넌트

컴포넌트는 화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다.

Vue 에서 최상위 컴포넌트는 root 고 이를 시작으로 트리 구조로 형성된다.

 

- 전역 컴포넌트

여러 인스턴스에서 공통으로 사용, 모든 자식 컴포넌트에서 사용 가능하다.

주로 플러그인, 라이브러리 등 앱 전역에서 사용할 공통 컴포넌트를 작성한다.

vue 인스턴스 생성 전에 컴포넌트를 만들어주어야 한다.

 

Vue.component('component-a', { template: '<div> hello world AAA !!!</div>'})
Vue.component('component-b', { template: '<div> hello world BBB !!!</div>'})
Vue.component('component-c', { template: '<div> hello world CCC !!!</div>'})


new Vue({
    el: '#app'
})


<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>


// 렌더링 후 이와 같이 구현
<div id="app">
    <div> hello world AAA !!!</div>
    <div> hello world BBB !!!</div>
</div>

 

* root 엘리먼트가 있고 그 안에 태그들이 들어가야 함

* 줄 바꿈 없이 사용하려면 ' ', 줄을 바꿔도 사용할 수 있으려면 `` 사용

 

- 지역 컴포넌트

vue 인스턴스 내에 직접 삽입하는 방식이다. 트리 구조로 구성할 수 있고 부모-자식 컴포넌트 간 통신이 가능하다.

특정 인스턴스 내에서만 유효하고 자식 컴포넌트에서 자동으로 사용할 수 없다.

components 로 정의하고, 생성한 컴포넌트를 템플릿 내에 태그로 지정한다.

전역 컴포넌트에서는 사용되지 않는 모든 컴포넌트가 빌드에 포함되기 때문에 보편적으로는 지역 컴포넌트를 많이 사용한다.

 

var ComponentD = { template: '<div> hello world DDD !!!</div>' }
var ComponentE = { template: '<div> hello world EEE !!!</div>' }
var ComponentF = { template: '<div> hello world FFF !!!</div>' }


new Vue({
    el: '#app',
    components: {
        'component-d': ComponentD,
        'component-e': ComponentE
    }
})


<div id="app">
    <component-d></component-d>
    <component-e></component-e>
</div>

 

---

컴포넌트 통신 방식

모든 컴포넌트가 자체의 스코프를 가지고 있어 다른 컴포넌트의 값을 바로 참조할 수는 없다.

vue는 기본적으로 직접적인 통신은 불가능한 구조이고 각 컴포넌트 간 데이터 이동은 단방향만 가능하다.

부모 컴포넌트의 데이터가 바뀌면 하위 컴포넌트의 데이터가 바뀌지만, 반대로 하위 컴포넌트의 데이터가 바뀌면 부모 컴포넌트의 데이터가 바뀌지는 않는다.

 

부모에서 자식으로는 데이터를 내리고(props) 자식에서 부모로는 이벤트를 올린다(event emit).

 

- props

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다.

v-bind 로 해당 컴포넌트에 정의된 props 속성에 접근할 수 있고 props 의 역할은 부모의 data 영역에 접근할 수 있게 해주는 속성이다.

 

// 상위 컴포넌트
<div id="app">
  <child-component v-bind:propsdata="message"></child-component> // 하위 컴포넌트에 상위 컴포넌트가 갖고 있는 message를 전달
</div>


// 하위 컴포넌트
Vue.component("child-component", { // 상위 컴포넌트의 data 속성인 message를 propsdata라는 속성으로 넘겨받음
  props: ["propsdata"],
  template: '<p>{{ propsdata }}</p>'
});


// 상위 컴포넌트
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue! from Parent Component"
  }
});

 

* props 변수명을 카멜 기법(myComp)으로 정의했다면 html 태그에서 사용할 때는 케밥 기법(my-comp)으로 선언해야 한다.

 

- emit

하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달할 때 사용한다.

 

하위 컴포넌트에서 input 이벤트에 $emit 으로 이벤트를 넘긴다. 첫 번째 인자는 부모에서 자식을 호출할 때 적을 이름, 두 번째 인자는 넘길 값이다.

<input v-model="value" @change="updateData" />

<script>
...
    props: [
        'value',
    ],
    methods : {
    	updateData(e) {
        	this.$emit('updatedData', e.target.value)
        }
    }
</script>

 

부모 컴포넌트에서는 자식에서 첫 번째 인자로 넘긴 메서드 이름을 바인딩 시켜 부모 컴포넌트의 data 를 바꿔준다.

<my-component value="1" @updatedData="onChanged" />

<script>
...
	methods: {
    	onChanged(myData) {
        	this.parentData = myData
        }
    }
</script>

 

이렇게 props 와 emit 하는 과정을 합쳐서 간단하게 만들어놓은 것이 v-model 이다.

위 emit 하는 예제를 v-model 을 사용하도록 바꾸면 아래와 같다.

<input v-model="value" @change="updateData" />

<script>
...
    props: [
        'value',
    ],
    methods : {
    	updateData(e) {
        	this.$emit('updatedData', e.target.value)
        }
    }
</script>

 

부모에서 자식 컴포넌트 태그에 v-model 을 사용하면 해당 data 가 자식의 props 로 넘어가고, 자식에서 이벤트를 발생시키면 넘긴 데이터가 변수에 할당된다.

<my-component v-model="parentData" />

 

별도 지정이 없을 경우 자식의 props는 value로 지정되고, 자식에서 보내는 이벤트는 input 이벤트가 지정된다. props 명이나 이벤트명을 커스텀할 수도 있다. 이 때, 자식에서 받는 props는 명시적으로 설정해주어야 한다. 

 

---

참고자료 및 출처 🙇‍♂️

https://jinyisland.kr/p/vue-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B0%9C%EB%85%90/

https://whitepro.tistory.com/255

https://icerabbit.tistory.com/120