[Vue3] 컴포넌트 간의 통신 (Event Bus) 구현하기 - mitt

dhkim 2월 11, 2024

 


 이번 포스팅에서는 Vue 컴포넌트의 전 범위에서 이벤트를 발생시키고, 처리하는 Event Bus에 대해서 다룹니다.

Event Bus의 사용을 남발했을 경우, 의도치 않은 결과를 초래할 수 있기 때문에 

Vue3에서는 Event Bus에 대해 지양하며, 공식적으로 지원하지 않습니다.

이 후, Vue3 공식은 아니지만 mitt 라이브러리를 통해 이전과 같이 구현할 수 있습니다.


1. mitt 설치

1
npm install --save mitt


2. mitt 등록 (main.js)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';

const app = createApp(App);

const emitter = mitt();
app.config.globalProperties.emitter = emitter;

app.mount('#app');



3. 이벤트 등록

emit 이벤트를 등록합니다. 

등록에 대한 코드는 어느 파일에서든 가능하지만, 관리 차원에서 한 파일에 모아두는 것을 지향하고자 합니다.

아래 예제에서는 데이터 fetch 시에, 화면 전체범위에 출력할 Spinner 구동에 대한 이벤트를 정의합니다.

this.emitter.on ('{이벤트 명}', {콜백 함수});

1
2
3
4
5
6
7
8
9
function StartSpinner() {
        this.loading = true;
}
function FinishSpinner() {
        this.loading = false;
}

this.emitter.on('startSpinner', this.StartSpinner);
this.emitter.on('finishSpinner', this.FinishSpinner);


4. 이벤트 호출

등록한 이벤트 ('startSpinner', 'finishSpinner')를 호출하는 예제 입니다.

this.emitter.emit('{이벤트 명}', { 전달 인자 });

1
2
3
4
5
6
7
8
9
this.emitter.emit('startSpinner', {});

/**
 * 
 * Await Fetch Data...
 * 
 */

this.emitter.emit('finishSpinner', {});



5. 이벤트 제거

    1) 이벤트 제거

도입부에서 설명한 바와 같이 Event Bus를 자주 사용하는 것은 추후 유지보수성이나 개발 간에 의도치 않은 결과를 낳을 여지를 두는 것과 같습니다. 따라서, 사용 목적에 따라 일시적으로 사용되는 경우 반드시 이벤트를 해지하는 절차를 밟아야 합니다.

this.emitter.off ('{이벤트 명}', {콜백 함수});

1
2
this.emitter.off('startSpinner', this.StartSpinner);
this.emitter.off('finishSpinner', this.FinishSpinner);


    2) 이벤트 전체 제거

mitt는 on, off, emit 3가지 메소드 외에도 등록된 전체 이벤트에 접근할 수 있는 'all' 메소드가 있습니다.

이를 활용하면 전체 이벤트를 쉽게 제거할 수 있습니다

1
this.emitter.all.clear();


0 댓글