📌 Vue.js에서 전역 EventBus 또는 mitt 활용법

📌 Vue.js에서 전역 EventBus 또는 mitt 활용법

Vue 실무 구성 요소 > 6️⃣ 실무 구성 요소와 유틸 > 전역 EventBus 또는 mitt 활용법

• 1. 왜 EventBus가 필요한가?
• 2. Vue 2 방식의 EventBus
• 3. mitt란 무엇인가?
• 4. mitt 적용 예제 (전역 이벤트 처리)
• 5. mitt vs EventBus 차이점 정리
• 6. 실무 팁 & 주의사항
• 🔚 다음 글 안내

---

1. 왜 EventBus가 필요한가?

Vue에서는 일반적으로 props와 emit을 통해 부모-자식 간 통신을 합니다. 하지만 다음과 같은 경우에는 전역 이벤트 시스템이 유용합니다.

• 형제 컴포넌트 간 데이터 전달
• 루트에서 특정 컴포넌트에 이벤트 전파
• Vuex를 쓰기엔 너무 단순한 일회성 이벤트

2. Vue 2 방식의 EventBus

// bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// sender.vue
EventBus.$emit("hello", "이벤트 발생");

// receiver.vue
EventBus.$on("hello", (msg) => {
  console.log("수신됨:", msg);
});

⚠️ Vue 3에서는 위 방식이 사라졌습니다. 대신 mitt와 같은 경량 라이브러리를 사용하는 것이 일반적입니다.

3. mitt란 무엇인가?

mitt는 200줄도 안 되는 작은 이벤트 처리 라이브러리입니다.

npm install mitt

간단하고 Vue 3과 잘 어울려서 Vue 공식 문서에서도 추천합니다.

4. mitt 적용 예제 (전역 이벤트 처리)

① mitt 인스턴스 생성

// common/eventBus.js
import mitt from 'mitt';
const emitter = mitt();
export default emitter;

② main.js에 등록

import emitter from '@/common/eventBus';
app.config.globalProperties.$emitter = emitter;

③ 이벤트 발신

// sender.vue
this.$emitter.emit("popup:open", { type: "alert", message: "띄워줘!" });

④ 이벤트 수신

// receiver.vue
onMounted(() => {
  this.$emitter.on("popup:open", (payload) => {
    console.log("수신한 값:", payload);
  });
});

⑤ 이벤트 해제 (메모리 누수 방지)

onUnmounted(() => {
  this.$emitter.off("popup:open");
});

5. mitt vs EventBus 차이점 정리

항목	Vue 2 EventBus	mitt
Vue 3 지원	❌ (더 이상 권장 안 함)	✅ 공식 추천
기반 구조	Vue 인스턴스 활용	경량 이벤트 시스템
타입 지원	없음	TypeScript 친화적

6. 실무 팁 & 주의사항

• .off()를 꼭 호출해서 이벤트 누적 방지
• 이벤트명을 prefix로 구분지으면 충돌 방지에 좋음 ("popup:open" 형태)
• Vuex에 넣기엔 너무 단순한 상태는 mitt로 처리하는 것이 깔끔
• 한번만 실행해야 한다면 once 같은 유틸을 직접 구현

🔚 다음 글 안내

이제 전역 이벤트 시스템으로 컴포넌트 간 통신을 확실히 처리할 수 있게 되었어요!
다음 글에서는 커스텀 디렉티브 만들기를 주제로 실무에서 자주 쓰이는 v-focus, v-mask 등을 구현해 봅니다.

👉 다음 글: Vue 커스텀 디렉티브 만들기 - 실전 예제