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

2023. 10. 13. 13:44· Vue.js
목차
  1. [mitt 라이브러리란?]
  2. [mitt 사용방법]
  3. 📌 on
  4. 📌 off
  5. 📌 emit

[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.

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

github.com

 

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

+----------------+      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 라이브러리의 장점은 크기가 작기 때문에 프로젝트 규모에 따라 적절하게 사용하면 될 거 같습니다!

저작자표시 (새창열림)

'Vue.js' 카테고리의 다른 글

[Vue.js] localStorage와 sessionStorage로 웹 스토리지 활용하기  (0) 2023.10.23
[Vue.js] provide와 inject 사용 방법  (0) 2023.10.20
[Vue.js] .env 파일로 환경 변수 관리하기  (0) 2023.10.04
[Vue.js] v-slot으로 컴포넌트 효율적으로 사용하기  (0) 2023.09.25
[Vue.js] axios 라이브러리를 사용한 API 호출  (0) 2023.09.23
  1. [mitt 라이브러리란?]
  2. [mitt 사용방법]
  3. 📌 on
  4. 📌 off
  5. 📌 emit
'Vue.js' 카테고리의 다른 글
  • [Vue.js] localStorage와 sessionStorage로 웹 스토리지 활용하기
  • [Vue.js] provide와 inject 사용 방법
  • [Vue.js] .env 파일로 환경 변수 관리하기
  • [Vue.js] v-slot으로 컴포넌트 효율적으로 사용하기
eunex
eunex
성장하는 자기개발자eunex 님의 블로그입니다.
eunex
성장하는 자기개발자
eunex
전체
오늘
어제
  • 분류 전체보기
    • jQuery
    • JavaScript
    • Vue.js
    • React
    • iOS
    • 자격증
    • Algorithm
    • Python
    • 회고
    • CS
    • 정보처리기사 실기
    • JSP
    • 은행실무기초

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 회고
  • watchEffect
  • proxy
  • computed
  • 자격증
  • ADsP
  • ref
  • 개발자
  • 상반기
  • SQLD
  • Reactive
  • vue
  • watch

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.0
eunex
[Vue.js] mitt 라이브러리로 이벤트 핸들링하기

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.