🛠️ 처음부터 만드는 EventEmitter — 컴포넌트 간 메시지를 주고받기

문제

서로 모르는 모듈끼리 데이터를 주고받아야 할 때, 직접 참조하면 강한 결합이 생깁니다.
`EventEmitter`(PubSub) 패턴을 쓰면 발행자와 구독자가 서로를 몰라도 이벤트로 통신할 수 있습니다.
---

코드

```typescript
type Listener = (data: T) => void;
class EventEmitter {
private events = new Map>();
/** 이벤트 구독. 해제 함수를 반환 */
on(event: string, listener: Listener): () => void {
if (!this.events.has(event)) {
this.events.set(event, new Set());
}
const listeners = this.events.get(event)!;
listeners.add(listener as Listener);
// 구독 해제 함수 (클린업용)
return () => {
listeners.delete(listener as Listener);
if (listeners.size === 0) this.events.delete(event);
};
}
/** 한 번만 실행되는 구독 */
once(event: string, listener: Listener): () => void {
const off = this.on(event, (data) => {
off();
listener(data);
});
return off;
}
/** 이벤트 발행 */
emit(event: string, data: T): void {
const listeners = this.events.get(event);
if (!listeners) return;
for (const fn of listeners) {
fn(data);
}
}
/** 특정 이벤트의 모든 리스너 제거 */
off(event: string): void {
this.events.delete(event);
}
}
```
---

사용 예제

```typescript
const bus = new EventEmitter();
// 구독
const unsubscribe = bus.on<{ userId: string }>('login', (data) => {
console.log(`${data.userId} 로그인!`);
});
// 한 번만 실행
bus.once('login', () => console.log('첫 로그인 환영 배너 표시'));
// 발행
bus.emit('login', { userId: 'hyuk' });
// → "hyuk 로그인!"
// → "첫 로그인 환영 배너 표시"
bus.emit('login', { userId: 'hyuk' });
// → "hyuk 로그인!" (once는 이미 해제됨)
// 구독 해제
unsubscribe();
```
---

핵심 포인트

| 개념 | 설명 |
|------|------|
| `Map` + `Set` | 이벤트별 리스너를 중복 없이 관리 |
| 구독 해제 함수 반환 | `off('event', fn)` 대신 클로저로 깔끔하게 해제 — React `useEffect` 클린업과 동일 패턴 |
| `once`가 `on` 위에 구현 | 기존 메서드를 조합해 새 기능을 만드는 패턴 |
| 느슨한 결합 | 발행자는 누가 듣는지, 구독자는 누가 보내는지 모름 |

실전 활용

React: 전역 상태 라이브러리 없이 크로스 컴포넌트 통신

Node.js: `EventEmitter`를 상속받는 `Stream`, `http.Server` 등의 핵심 패턴

마이크로서비스: 서비스 간 이벤트 기반 통신의 인메모리 버전

> Node.js의 내장 `EventEmitter`도 동일한 원리입니다.
> 📚 [Node.js Events 공식 문서](https://nodejs.org/api/events.html)
⚠️ 주의: 구독 해제를 잊으면 메모리 누수가 발생합니다. 컴포넌트 언마운트/정리 시점에 반드시 `unsubscribe()`를 호출하세요.