[react-native] EventEmitter

 React Native의 EventEmitter는 컴포넌트나 모듈 간의 이벤트 기반 통신을 가능하게 하는 클래스이다.

 

이 클래스를 활용하여, 개발자는 특정 이벤트가 발생했을 때 리스너에 알림을 보낼 수 있다.

 

EventEmitter는 주로 네이티브 모듈과 JavaScript 간의 이벤트 통신에 사용되지만, React Native 애플리케이션 내의 다른 용도로도 사용될 수 있다.

 

이 글에서는 해당 이벤트를 위해 eventemitter3 라는 라이브러리를 사용하려고 한다.

 

yarn add eventemitter3

---

EventEmitter 사용법

1. EventEmitter 인스턴스 생성: EventEmitter의 인스턴스를 생성하여 이벤트를 발생시키고, 이에 대한 리스너를 등록한다.
2. 이벤트 리스너 등록: addListener 메소드를 사용하여 특정 이벤트에 대한 리스너를 등록한다.
3. 이벤트 발생시키기: emit 메소드를 사용하여 이벤트를 발생시킨다. 이 때, 리스너에 전달할 데이터도 함께 보낼 수 있다.
4. 이벤트 리스너 제거: 더 이상 이벤트 리스너가 필요 없을 때는 removeListener 메소드를 사용하여 리스너를 제거한다.

예제 코드

아래의 예제 코드는 EventEmitter를 사용하여 커스텀 이벤트를 발생시키고, 해당 이벤트에 대한 리스너를 등록 및 해제하는 방법을 보여준다.

import EventEmitter3 from 'eventemitter3';

// EventEmitter 인스턴스 생성
const events = new EventEmitter3();

// 이벤트 리스너 등록
const onMyEvent = (message) => {
  console.log(`이벤트 수신: ${message}`);
};
events.on('myEvent', onMyEvent);

// 이벤트 발생시키기
events.emit('myEvent', 'Hello, EventEmitter3!');

// 이벤트 리스너 제거
events.off('myEvent', onMyEvent);

 

 이 예제에서, EventEmitter 인스턴스는 myEmitter라는 변수에 저장된다.

 

그리고 myEvent라는 이름의 이벤트에 대한 리스너로 myListener 함수가 등록된다.

 

이 리스너는 이벤트가 발생할 때마다 호출되어, 이벤트와 함께 전달된 데이터를 콘솔에 출력한다. 마지막으로, removeListener 메소드를 사용하여 더 이상 필요 없는 이벤트 리스너를 제거한다.

 

EventEmitter는 React Native 애플리케이션에서 강력하고 유연한 이벤트 통신 메커니즘을 제공한다.

 

이를 통해 개발자는 애플리케이션의 다양한 부분 간에 효율적으로 데이터를 전달하고 상태 변경을 관리할 수 있다.