Event Bus

Vue에서 부모 자식 관계가 아닌 아예 동떨어져 있는 컴포넌트 끼리 통신을 하기 위해선 어떻게 해야 할까요?

그럴 때 사용하는 것이 Event Bus입니다! 이것이 무엇인지 바로 알아봅시다.

 

---

1. Event Bus

Event Bus란? 컴포넌트 간의 통신을 쉽게 하기 위해 사용되는 패턴이에요.

이는 중앙 집중식의 이벤트 관리 시스템으로, 다양한 컴포넌트가 서로 데이터를 주고받거나 이벤트를 전송할 수 있도록 해요.

그렇기에 부모-자식 관계가 없는 컴포넌트 사이에서 데이터를 전달 or 상호작용을 할 때 유용합니다.

 

---

2. Event Bus 생성

Event Bus를 구현하기 위해 새 Vue 인스턴스를 생성합니다.

src/event-bus.js

import Vue from 'vue';
export const EventBus = new Vue();

이렇게 하면 EventBus를 통해 모든 컴포넌트에서 이벤트를 송신 or 수신할 수 있어요.

 

---

3. Event Bus 사용

그럼 이제 Event Bus를 사용하여 이벤트를 송신 및 수신 해보겠습니다.

 

3-1. 이벤트 송신 (Emit)

EventBus.$emit( )을 입력하여, 이벤트를 발생시킵니다.

ComponentA.vue

import { EventBus } from './event-bus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', 'Component A입니다.');
    }
  }
}

위 코드에서 sendMessage 메서드를 호출하면, message-sent라는 이벤트와 함께 "Component A입니다." 라는 메시지가 Event Bus에 송신됩니다.

 

3-2. 이벤트 수신 (On)

다른 컴포넌트에서 해당 이벤트를 수신하려면 EventBus.$on( )을 사용해요.

ComponentB.vue

import { EventBus } from './event-bus';

export default {
  created() {
    EventBus.$on('message-sent', (message) => {
      console.log('Received message: ', message);
    });
  },
  beforeUnmount() {
    EventBus.$off('message-sent'); // 메모리 누수를 방지하기 위해 해제
  }
}

ComponentB는 message-sent 이벤트를 수신하고, 메시지가 도착하면 console에 출력하게 됩니다.

 

이때, beforeUnmount는 왜 추가하는 것일까요? 그 이유는 메모리 누수 방지를 위해서 입니다.

이벤트 리스너를 설정하면, 컴포넌트가 소멸할 때, 이벤트를 해제해 주는 것이 중요해요. 그렇지 않으면, 메모리 누수가 발생할 수 있어요. 이를 위해 beforeUnmount 훅에서 $off( )를 사용해 리스너를 제거합니다.

 

---

4. Event Bus의 한계

Vue 3에서는 Composition API와 provide/inject 등의 개선된 상태 관리 방법이 있어서 Event Bus는 이전보다 덜 사용되는 편이라고 하네요..  특히 Vuex 또는 Pinia와 같은 상태 관리 라이브러리를 사용하는 것이 더 효율적일 수 있어요.

Event Bus는 작은 규모의 프로젝트에서 빠르게 데이터 전달을 구현하고자 할 때 적합하지만, 대규모 프로젝트에서는 유지보수와 관리 측면에서 비효율적일 수 있습니다.

 

---

5. 정리하며

지금까지 Event Bus에 대해 알아보았습니다.

이를 통해 Vue 컴포넌트 간의 통신을 간편하게 구현할 수 있을 것 같아요.

 

참고

탱구탱구s 님의 [Vue.js] 4. Event Bus를 통한 컴포넌트 통신

developerjin 님의 vue.js EventBus를 활용한 컴포넌트간 데이터 공유

권기현 님의 TIL. Vue.js [Event Bus]