디자인 패턴 - Observer 패턴

들어가기에 앞서

https://www.patterns.dev/vanilla/observer-pattern 에 있는 설명과 예시를 바탕으로 하여 관련 주제에 대해 이제까지 공부한 내용을 개인적으로 정리한 포스팅임을 밝힙니다.

 

---

 

Observer 패턴

• Observer 패턴에서는 특정 객체를 구독할 수 있는데, 구독하는 주체를 Observer라고 하고, 구독 가능한 객체를 Observable이라고 한다.
• 이벤트가 발생할 때마다 Observable은 모든 Observer에게 이벤트를 전파한다. 
• Observable 객체는 보통 3가지 주요 특징을 포함한다.
  • observers : 이벤트가 발생할 때마다 전파할 Observer들의 배열
  • subscribe() : Observer를 observers 배열에 추가한다. 
  • unsubscribe() : observers 배열에서 Observer를 제거한다. 
  • notify() : 등록된 모든 Observer들에게 이벤트를 전파한다. 

 

 

예제) 앱 내에서 일어나는 사용자 인터랙션 추적 

사용자가 버튼을 클릭하거나 스위치를 토글할 때마다 타임스탬프를 로깅하고, 이벤트가 발생할 때마다 토스트 알림을 화면에 노출한다. 

 

1. ES6 클래스를 사용하여 Observable 구현

 

 

2. <Button>과 <Switch> 컴포넌트의 이벤트를 notify 메소드를 통해 전파 

 

 

작동 원리를 도식으로 표현하면 다음과 같다. 

 

- handleClick과 handleToggle이 observable의 notify를 호출한다.

- 뒤이어 이를 구독하고 있던 observer인 logger와 toastify 함수가 이 이벤트를 받아서 특정 동작을 수행한다. 

 

결과적으로 앱 내에서 인터렉션이 발생하는 동안 logger와 toastify는 notify의 호출로부터 이벤트를 계속 받을 수 있다. 

 

 

 

버튼 클릭시 화면 스크린샷

 

 

 

사용 사례 

• 비동기 호출 혹은 이벤트 기반 데이터를 처리할 때 매우 유용하다.
• 예시) 만약 어떤 컴포넌트가 특정 데이터의 다운로드 완료 알림을 받기 원하거나, 사용자가 메시지 보드에 새로운 메시지를 게시했을 때 모든 멤버가 알림을 받거나 하는 등의 상황

 

 

장점

• Observer 패턴을 사용하는 것도 관심사의 분리와 단일 책임의 원칙을 강제하기 위한 좋은 방법이다. 
• Observer 객체는 Observable 객체와 강결합되어 있지 않고 언제든지 분리될 수 있다. 
• Observable 객체는 이벤트 모니터링의 역할을 갖고, Observer는 받은 데이터를 처리하는 역할을 한다. 

 

단점

• Observer가 복잡해지면 모든 Observer들에게 알림을 전파하는 데 성능 이슈가 발생할 수 있다.

 

 

📚 같이 읽어보면 좋은 자료

The Observer Pattern in JavaScript — the Key to a Reactive Behavior