비 부모-자식 통신 eventBus :: 마이구미

이 글은 Vue 사용에 있어, 컴포넌트 간의 통신을 다뤄본다.

크게는 Vue 내부의 컴포넌트 간의 통신의 흐름을 이해하는데 도움이 될 것이다.

공식 문서 - https://kr.vuejs.org/v2/guide/components.html

Vue를 접해봤다면, 부모-자식 관계의 다음과 같은 그림과 설명을 알고 있을 것이다.

부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 

부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다.

위와 같은 흐름에서 자식은 메시지를 통해 부모의 함수를 호출할 수 있다.

// 부모
this.$on('add-cart', this.addCart)

// 자식
this.$parent.$emit('add-cart', {params})

CodePen 예제 링크

See the Pen to parent from child in Vue by leejunghyun (@mygumi) on CodePen.

하지만 다음과 같은 상황을 보자.

• 두 컴포넌트 간에 통신이 필요한데, 부모-자식이 아닐 수도 있다.

• 또한 여러 컴포넌트에서 공통된 데이터를 공유한다.

위와 같은 상황을 위해 규격을 만든 공간이 있다면 효율적이다.

이러한 공간으로 만드는 것이 Vue 인스턴스로 이벤트 버스(event Bus) 를 사용하는 것이다.

CodePen 예제 링크

See the Pen eventHub in Vue by leejunghyun (@mygumi) on CodePen.

이벤트 버스는 부모-자식 관계에 있어서도, 유용하게 사용될 수 있다.

형제 관계 또는 조상-자손 관계에 있어서, emit의 한계를 도와준다.

이러한 이벤트 버스는 복잡한 상황에서는 관리하기 힘들어진다.

그래서 존재하는 것이 중앙 집중식 저장소 역할을 하는 "Vuex" 가 된다. (Vuex 공식 한글화 문서)