[바미] Observer 패턴

Observer 패턴

Observable을 활용해 Subscriber에게 이벤트 발생을 알린다.

 

📜 원문: patterns.dev - observer pattern

📜 번역: https://patterns-dev-kr.github.io/design-patterns/observer-pattern/

 

Observer 패턴에서 특정 객체를 구독할 수 있는데. 구독하는 주체를 Observer라 하고 구독 가능한 객체를 Observable이라

합니다. 이벤트가 발생할 때 마다 Observable은 모든 Observer에게 이벤트를 전파하죠.

---

Observable 객체는 보통 3가지 주요 특징을 포함합니다.

 

• observers : 이벤트가 발생할때마다 전파할 Observer들의 배열
• subscribe() : Observer를 Observer 배열에 추가한다
• unsubscribe() : Observer 배열에서 Observer를 제거한다
• notify() : 등록된 모든 Observer들에게 이벤트를 전파한다

---

아래는 ES6 클래스를 사용하여 Observable을 구현한 예제입니다.

class Observable {
  constructor() {
    this.observers = []
  }

  subscribe(func) {
    this.observers.push(func)
  }

  unsubscribe(func) {
    this.observers = this.observers.filter(observer => observer !== func)
  }

  notify(data) {
    this.observers.forEach(observer => observer(data))
  }
}

subscribe메서드를 통해 Observer를 등록하고 반대로 unsubscribe를 통해 등록 해지할 수 있습니다.

그리고 notify메서드를 통해 모든 Observer에게 이벤트를 전파할 수 있죠.

 

구현한 Observable 객체를 이용해 무언가 만들어 보겠습니다. Button 컴포넌트와 Switch 컴포넌트를 가진 기본적인 앱을 만들었습니다.

 

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
    </div>
  )
}

앱 내에서 일어나는 사용자 인터렉션을 추적하고 싶습니다. 사용자가 버튼을 클릭하던 스위치를 토글하던 간에 타임스탬

프를 로깅하려고 합니다. 또 이벤트 발생시 마다 토스트 알림을 화면에 노출하려고 합니다.

 

본질적으로 구현해야 하는 것은 다음과 같습니다.

 

 

사용자가 handleClick 혹은 handleToggle 함수를 호출할 때 마다 핸들러는 Observable의 notify 를 호출합니다.

notify 메서드는 등록된 모든 Observer에게 handleClick 혹은 handleToggle 에서 전달된 데이터를 포함한 이벤트를 전파합니다.

 

먼저 logger 함수와 toastify 함수를 만들자. 이 함수들은 notify 메서드로부터 data 를 받게 될 것입니다.

 

import { ToastContainer, toast } from 'react-toastify'

function logger(data) {
  console.log(`${Date.now()} ${data}`)
}

function toastify(data) {
  toast(data)
}

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  )
}

 

아직까지 Observable과 logger, toastify 함수가 연결되지 않았기 때문에 알림을 받을 수 없습니다. 

이 함수들이 Observer로써 작동하기 위해서는 Observable의 subscribe 메서드를 사용해야 합니다.

import { ToastContainer, toast } from 'react-toastify'

function logger(data) {
  console.log(`${Date.now()} ${data}`)
}

function toastify(data) {
  toast(data)
}

observable.subscribe(logger)
observable.subscribe(toastify)

export default function App() {
  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  )
}

이제 이벤트가 발생할 때 마다 logger 와 toastify 함수는 알림을 받게 될 것입니다.

이제 Observable에 이벤트를 전파하는 코드만 작성하면 됩니다. 버튼 클릭에 해당하는 handleClick, 스위치 토글에 해당하

는 handleToggle 이벤트 핸들러를 만들고, 안에서 Observable의 notify 를 실행해 이벤트를 전파합니다.

이 때 Observer에서 필요한 데이터를 인자로 넘기도록 합니다.

import { ToastContainer, toast } from 'react-toastify'

function logger(data) {
  console.log(`${Date.now()} ${data}`)
}

function toastify(data) {
  toast(data)
}

observable.subscribe(logger)
observable.subscribe(toastify)

export default function App() {
  function handleClick() {
    observable.notify('User clicked button!')
  }

  function handleToggle() {
    observable.notify('User toggled switch!')
  }

  return (
    <div className="App">
      <Button>Click me!</Button>
      <FormControlLabel control={<Switch />} />
      <ToastContainer />
    </div>
  )
}

전체 플로우를 살펴보면 handleClick 과 handleToggle 이 Observable의 notify 를 호출하고, 뒤이어 이를 구독하고 있던 Observer logger 와 toastify 함수는 이 이벤트를 받아 특정 동작을 수행합니다.

 

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

---

Observer 패턴은 다양하게 활용할 수 있지만 비동기 호출 혹은 이벤트 기반 데이터를 처리할 때 매우 유용합니다.

만약 어떤 컴포넌트가 특정 데이터의 다운로드 완료 알림을 받기 원하거나, 사용자가 메시지 보드에 새로운 메시지를 게시

했을 때 모든 멤버가 알림을 받거나 하는 등의 상황 말입니다.

 

---

사례 분석

RxJS는 Observer 패턴을 구현한 유명 오픈소스 라이브러리 입니다.

ReactiveX 는 Observer 패턴, 이터레이터 패턴, 함수형 프로그래밍을 조합하여 이벤트의 순서를 이상적으로 관리할 수 있습니다.

RxJS를 사용하면 Observable과 Observer(Subscriber)를 만들어낼 수 있다. 아래 예제는 공식 문서에 소개된 것으로 사용자가 문서를 드래그 중인지 아닌지 콘솔에 출력해줍니다.

 

RxJS는 이것 말고도 Observer 패턴에 대한 매우 많은 빌트인 기능들을 제공합니다.

---

장점

Observer 패턴을 사용하는 것도 관심사의 분리와 단일 책임의 원칙을 강제하기 위한 좋은 방법입니다.

Observer 객체는 Observable 객체와 강결합되어있지 않고 언제든지 분리될 수 있습니다.

Observable 객체는 이벤트 모니터링의 역할을 갖고. Observer는 받은 데이터를 처리하는 역할을 갖게 됩니다.

 

단점

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

 

참조

• RxJS
• JavaScript Design Patterns: The Observer Pattern