이벤트 버스(관계없는 컴포넌트 간 통신)

이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에

데이터를 주고받을 수 있는 방법이다.

이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위

구조를 유지해야 데이터를 주고받을 수 있었다.

이벤트 버스를 사용하면 이런 상위-하위 관계를

유지하고 있지 않아도 데이터를 한 컴포넌트에서

다른 컴포넌트로 전달할 수 있다.

먼저 아래 그림을 보자.

최하위에 있는 하위컴포넌트B에서 상위 컴포넌트A로

데이터를 전달하려면 Vue에서 제시하는 기본적인

컴포넌트 통신 방식을 생각해야한다.

하위컴포넌트B 상위컴포넌트B 최상위컴포넌트를 거쳐서

상위 컴포넌트A까지 가야한다. 하지만 웹이 커져

컴포넌트가 많아지면 이런식의 데이터 전달 방식은 번거롭다.

이럴 경우 이벤트버스를 사용하면 중간 컴포넌트들을 거치지 않고

하위컴포넌트B 에서 바로 상위 컴포넌트A로 데이터를

전달할 수 있다.

이벤트 버스의 형식은 아래와 같다.

이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는

별개로 새로운 인스턴스를 1개 생성하고 새 인스턴스를 이용하여

이벤트를 보내고 받는다. 보내는 컴포넌트에서는 .$emit()을,

받는 컴포넌트에서는. $on()을 사용한다.

이제 간단하게 이벤트 버스를 사용해 보자.

먼저 15line에서 이벤트 버스로 사용할 새 인스턴스를 1개 생성한다.

이제 eventBus변수로 새 인스턴스의 속성과 메소드에 접근할 수 있다.

다음 18line에서 하위컴포넌트에는 template속성과 methods속성을 설정한다.

template에는 "하위 컴포넌트 영역" 이라는 텍스트와 show라는

이름의 버튼을 하나 만들어준다. methods에는 showLog()메소드를 정의하고

메소드 안에 eventBus.$emit()을 선언해 triggerEventBus라는 이벤트를

발생하는 로직을 추가해준다. 이 이벤트는 발생할 때 수신하는 쪽에

인자값으로 100이라는 데이터를 함께 보낸다.

다음 29line에서 상위 컴포넌트의 created 라이프사이클 훅에 eventBus.$on으로

이벤트를 받는 로직을 추가한다. 발생한 이벤트 triggerEventBus를 수신할 때

앞에서 전달된 인자 값 100이 콘솔창에 출력된다.

이제 프로그램을 실행하면 show 버튼이 나오고 이 버튼을

클릭하면 showLog()가 실행되었을때 eventBus의 이벤트가 발생되며

이 발생한 이벤트는 상위 컴포넌트의 created()에 있는 eventBus.$on()에서

전달받아 이벤트와 함께 전달된 값 100이 콘솔창에 찍힐 것이다.

이벤트 버스를 사용하면 props속성을 이용하지않고

원하는 컴포넌트간에 직접적으로 데이터를 전달할수 있어 편리하지만

컴포넌트가 많아지면 어떤 컴포넌트에서 어디 컴포넌트로 보냈는지

관리가 잘 되지 않는다. 이 문제를 해결하려면 뷰엑스(Vuex)라는

상태관리 도구가 필요하다. 뷰엑스는 중,대형 애플리케이션에서

컴포넌트 간의 데이터 관리를 효율적으로 하는 라이브러리이다.