9.7.1 EventEmitter3 설치 및 적용하기

이벤트를 사용하기 위해 eventemitter3 라이브러리를 설치하세요.

$ yarn add eventemitter3

EventEmitter3의 인스턴스는 다음과 같은 형식으로 생성할 수 있습니다.

import EventEmitter3 from 'eventemitter3';

const events = new EventEmitter3();

리액트 네이티브 프로젝트 안의 모든 컴포넌트 및 Hook에서 우리가 만든 인스턴스에 접근하려면 두 가지 방법이 있습니다.

첫 번째는 자바스크립트 코드 자체에서 export해주는 것이고, 두 번째는 Context를 만들어서 인스턴스를 하위 컴포넌트로 내려주는 것이죠. 첫 번째는 매우 간단한 방법, 두 번째는 정석인 방법입니다.

현재 상황에서는 EventEmitter 인스턴스 내에 이벤트가 딱 하나 필요하기 때문에 첫 번째 방법도 나쁘지 않습니다. 직접 export해줬을 때는 자동 완성도 잘 되고요. 따라서 우리는 바로 export해주겠습니다. 만약 인스턴스가 기능별로 여러 개 필요해지거나, Context를 통해 인스턴스를 관리하는 것이 마음에 든다면 Context를 만들어도 상관 없습니다.

lib 디렉터리에 events.js 파일을 만들고 다음과 같이 코드를 작성해주세요.

lib/events.js

import EventEmitter3 from 'eventemitter3';

const events = new EventEmitter3();

export default events;