옵저버 패턴이란?

옵저버 패턴(Observer Pattern)이란?

옵저버 패턴은 어떤 객체의 상태가 바뀌면, 그와 의존 관계에 있는 객체들이 자동으로 알림을 받아 갱신되는 패턴입니다.

쉽게 말해 한 객체가 변하면 다른 객체들이 알아서 반응하게 만드는 구조입니다.

 

자바스크립트에서의 옵저버 패턴

 

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

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

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

// 사용 예시
const subject = new Subject();

// 옵저버 등록
subject.subscribe((msg) => console.log('A가 받은 메시지:', msg));
subject.subscribe((msg) => console.log('B가 받은 메시지:', msg));

// 상태 변경 후 알림
subject.notify('📢 새로운 뉴스가 도착했습니다!');

 

 

리액트에서의 옵저버 패턴

리액트는 옵저버 패턴을 내장한 프레임워크입니다.
컴포넌트는 상태(state)라는 주체를 구독(observer)합니다.
상태가 바뀌면 자동으로 다시 렌더링됩니다.

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count가 "subject"

  return (
    <div>
      <p>현재 카운트: {count}</p> {/* 이 부분이 "observer" */}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

 

이 예제에서 count가 바뀌면, 이 값을 사용하고 있는 부분이 자동으로 리렌더링됩니다.

즉, 리액트 훅(useState, useEffect)을 사용하는 순간 옵저버 패턴을 쓰고 있는 것입니다.