[Vue.js] mitt 라이브러리로 이벤트 핸들링하기

[mitt 라이브러리란?]

컴포넌트 간 관계가 부모/자식 관계라면 props와 emit을 사용하면 됩니다.

하지만 그 관계가 더 복잡하고 멀리 있다면 props와 emit을 반복해서 사용해야 할 것입니다. 이런 식으로 말이죠.

출처:https://ko.vuejs.org/guide/components/provide-inject.html#prop-drilling

이러한 체인을 막기 위해 provide와 inject을 사용하면 되지만, 복잡하지 않다면..! mitt 라이브러리를 사용하면 됩니다.

 

mitt는 작고 간단한 이벤트 버스로 컴포넌트 간 통신할 때 사용하는데 on, off, emit 3가지 메서드를 제공하고 있습니다!

https://github.com/developit/mitt

GitHub - developit/mitt: 🥊 Tiny 200 byte functional event emitter / pubsub.

 

간단한 다이어그램으로 이해할 수 있는데요.

+----------------+      emit('event')       +------+
|                |  ----------------------> |      |
| Child Component |                        | mitt  |
|                |  <---------------------  |      |
+----------------+    on('event', handler)  +------+

Child component에서 emit 메서드를 사용하여 'event'라는 이벤트를 발생시킵니다.

그럼 mitt 인스턴스는 해당 이벤트에 등록된 핸들러를 호출합니다.

간단하죠?! 😎

[mitt 사용방법]

먼저 mitt 라이브러리를 설치하고 사용할 파일에서 import 하면 준비는 끝입니다.

npm install mitt

import mitt from 'mitt'

const emitter = mitt()

📌 on

이벤트 리스너를 등록하는 메서드입니다. 첫 번째 파라미터에는 listen 하려는 이벤트 명을, 두 번째 파라미터에는 해당 이벤트가 발생했을 때 실행할 콜백 함수를 넣으면 됩니다.

emitter.on('hello', (msg) => console.log(msg))

📌 off

on으로 등록했던 이벤트를 제거하는 메서드입니다. 첫 번째 파라미터에는 unregister 하려는 이벤트 명을, 두 번째 파라미터에는 제거할 콜백 함수를 넣으면 됩니다.

const callback = (msg) => console.log(msg)

emitter.on('hello', callback)
emitter.off('hello', callback)

📌 emit

특정 이벤트를 발생시키는 메서드입니다. 첫 번째 파라미터에는 지금까지 마찬가지로 이벤트 명을, 두 번째 파라미터에는 이벤트에 보낼 데이터를 넣으면 됩니다.

emitter.emit('hello', 'Hello from Child Component!')

 

3가지 메서드로 mitt 라이브러리에 대해 설명하자면,

이벤트를 발생시키고(emit) 이벤트를 감지하고(on) 이벤트를 제거하는(off) 라이브러리

라고 설명할 수 있겠네요..!

 

설명한 3가지 메서드를 모두 사용한 예시는 다음과 같아요.

import mitt from 'mitt';

const emitter = mitt();

// Event handler function
function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// Attach the event handler to an event named 'greet'
emitter.on('greet', sayHello);

// Emit the 'greet' event
emitter.emit('greet', 'World'); // Logs: "Hello, World!"

// Remove the event handler from the 'greet' event
emitter.off('greet', sayHello);

// Emit the 'greet' event again
emitter.emit('greet', 'World'); // Nothing happens because there's no handler for this event anymore.

mitt 라이브러리의 장점은 크기가 작기 때문에 프로젝트 규모에 따라 적절하게 사용하면 될 거 같습니다!