뷰 컴포넌트 (Vue Component) 통신

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 컴포넌트 통신

뷰는 하나 이상의 뷰 컴포넌트로 구성되며, 각각의 고유한 유효 범위를 지니고 있어 타 컴포넌트의 데이터를 직접적으로 참조할 수 없습니다.

 

따라서 뷰 프레임워크 자체에서 정의한 상/하위 컴포넌트 관계의 특성을 이용하여 데이터 및 이벤트를 전달합니다.

 

 

상/하위 컴포넌트 관계에서의 통신

컴포넌트 간의 상/하위 관계를 지정하는 속성은 별도로 없으며 코드 구현시 컴포넌트 등록하는 과정을 통해 자연스럽게 관계가 설정됩니다.

즉, 뷰 인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트(부모)가 되고 새로운 컴포넌트는 하위 컴포넌트(자식)가 됩니다. 

 

상/하위 컴포넌트는 각각 데이터와 이벤트를 단방향으로만 전달할 수 있습니다.

• 상위 컴포넌트(부모): 하위 컴포넌트로 속성 props 전달
• 하위 컴포넌트(자식): 상위 컴포넌트로 이벤트 발생/전달

 

상위에서 하위 컴포넌트로 데이터 전달하기

하위 컴포넌트에 정의한 props 속성 정보를 이용하여 상위 컴포넌트에서 데이터를 props에 담아 전달하는 방식입니다. 

 

사용 속성 및 디렉티브

• props: 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)으로 데이터를 전달할 때 사용하는 속성
• v-bind: html의 속성인 id, class, style 등에 대해 model의 데이터를 연결할 때 사용하는 속성

 

형식

// 하위 컴포넌트 (자식)
Vue.component('child-component', {
	props: ['props 속성 이름'],
});

// 상위 컴포넌트 (부모)
<child-component v-bind:"props 속성이름"="상위 컴포넌트 data 속성"></child-component>

 

사용 예시

상위 컴포넌트의 message 속성을 하위 컴포넌트에 props로 전달하여 메세지를 출력하는 예시입니다.

...

<div id="app">
	<child-component v-bind:propsdata="message"></child-component>	// ★ Step 2
</div>

<script>
Vue.component('child-component', {
    props: ['propsdata'],	// ★ Step 3
    template: '<p> {{ propsdata }} </p>'	// ★ Step 4
});

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'	// ★ Step 1
    }
});
</script>

...

• 상위 컴포넌트에서 하위 컴포넌트로 데이터가 전달되는 순서를 주석으로 명시하였음 (// ★ Step #)
• 컴포넌트를 등록함과 동시에 뷰 인스턴스가 상위 컴포넌트로 설정되기 때문에 상위 컴포넌트를 별도로 지정하는 코드가 없음

 

 

하위에서 상위 컴포넌트로 이벤트 발생/전달하기

하위 컴포넌트에서 상위 컴포넌트로 특정 이벤트 발생 신호를 보내면 상위 컴포넌트에서 신호를 수신하여 관련 메소드를 호출하여 작업하는 방식입니다. 

 

사용 속성 및 디렉티브

• emit: 하위 컴포넌트(자식)에서 상위 컴포넌트(부모)로 발생한 이벤트 시그널(신호)를 보냄
• v-on: 이벤트 시그널(신호)를 수신하는 디렉티브

 

형식

// 하위 컴포넌트 (자식)
this.$emit('이벤트명');

// 상위 컴포넌트 (부모)
<child-component v-on:이벤트명="상위 컴포넌트의 메소드 명"></child-component>

 

사용 예시

show 버튼을 클릭하여 발생한 이벤트로 상위 컴포넌트의 printText() 메소드를 실행시키는 예제입니다. 

...
<div id="app">
	<child-component v-on:show-log="printText"></child-component>	// ★ Step 3
</div>

...
<script>
Vue.component('child-component', {
    template: '<button v-on:click="showLog">show</button>,	// ★ Step 1
    methods: {
        showLog: function() {
            this.$emit('show-log');	// ★ Step 2
        }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    },
    methods: {
        printText: function() {
            console.log("received an event");	// ★ Step 4
        }
    }
});
</script>

 

 

동일 레벨 컴포넌트 관계에서의 통신 - 이벤트 버스(Event Bus)

상/하위 컴포넌트가 아닌 동일 레벨의 컴포넌트에서 통신하기 위해 강제로 상위 컴포넌트를 두어야 합니다.

이러한 불필요한 사항을 해결하기 위해 고안된 방식이 바로 '이벤트 버스(Event Bus)'입니다.

 

이벤트 버스(Event Bus)

개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법을 의미합니다.

즉, 이벤트 버스를 이용해서 상/하위 컴포넌트 관계가 아니어도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있습니다.

 

특징

• props 속성을 이용하지 않고 원하는 컴포넌트 간에  직접적으로 데이터를 전달할 수 있어 편리
• 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제 발생 → 뷰엑스(Vuex)로 대응 가능

 

형식

// 이벤트 버스를 위한 추가 인스턴스 생성
var eventBus = new Vue();

// 이벤트를 보내는 컴포넌트
methods: {
	메서드명: function() {
    	eventBus.$emit('이벤트명', 데이터);
    }
}

// 이벤트를 받는 컴포넌트
methods: {
	created: function() {
    	eventBus.$on('이벤트명', function(데이터) {
        	// ...
        });
    }
}

 

구현 시 주의 사항

• 애플리케이션 로직을 담고 있는 인스턴스와 별개의 이벤트 버스용 인스턴스를 새로 생성해야 함
• emit과 on을 이용하여 이벤트를 보내고 받음 
  • $emit: 이벤트를 보내는 컴포넌트에서 구현할 때 사용
  • $on: 이벤트를 받는 컴포넌트에서 구현할 때 사용

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue