[TS Design Patterns] 행동 패턴 - 옵저버

Observer (Event-Subscriber, Listener)

 

- Observable를 활용해 Subscriber에게 이벤트 발생을 알림

- 구독하는 주체: Observer

   구독 가능한 객체: Observale

- 이벤트 발생할 때 마다 Observable는 모든 Observer에게 이벤트를 전파함

- 비동기 호출 또는 이벤트 기반 데이터 처리할 때 매우 유용함

  ex) 어떤 컴포넌트가 특정 데이터의 다운로드 완료 알림 받기를 원함,
         사용자가 메시지 보드에 세로운 메시지를 게시했을 때 모든 멤버가 알림 받는 상황 등

- RxJS: Observer 패턴을 구현한 유명한 오픈소스 라이브러리

- ReactiveX: Observer, 이터레이터 패턴, 함수형 프로그래밍을 조합하여 이벤트의 순서를 이상적으로 관리 가능

- 장점

  - 관심사의 분리

  - 단일 책임 원칙 강제

  - Observable 객체는 이벤트의 모니터링 역할, Observer는 받은 데이터를 처리

- 단점

  - Observer가 복잡해지면 Observer들에게 알림 전파하는데 성능 이슈 발생 가능

 

- 예시

 

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

  subscribe(f) {
    this.observers.push(f);
  }

  unsubscribe(f) {
    this.observers = this.observers.filter(subscriber => subscriber !== f);
  }

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

export default new Observable();

 

// App.js
import React from "react";
import { Button, Switch, FormControlLabel } from "@material-ui/core";
import { ToastContainer, toast } from "react-toastify";
import observable from "./Observable";

function handleClick() {
  observable.notify("User clicked button!");
}

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

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

function toastify(data) {
  toast(data, {
    position: toast.POSITION.BOTTOM_RIGHT,
    closeButton: false,
    autoClose: 2000
  });
}

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

export default function App() {
  return (
    <div className="App">
      <Button variant="contained" onClick={handleClick}>
        Click me!
      </Button>
      <FormControlLabel
        control={<Switch name="" onChange={handleToggle} />}
        label="Toggle me!"
      />
      <ToastContainer />
    </div>
  );
}

 

- 활용

---

[아티클]

[TS 사용 예시]

[UI Component] Design Patterns - Observer