[RxJS] 2편. React에서 RxJS로 상태관리를 한다는 것은?

React는 컴포넌트 기반 + 선언형 UI 프레임워크다.
RxJS는 데이터 흐름을 선언적으로 다루는 스트림 라이브러리다.
그렇다면 React에서 RxJS로 상태 관리를 한다는 것은 어떤 의미일까?

🌐 전역 상태를 스트림으로 선언

RxJS에서는 전역 상태를 BehaviorSubject로 선언하고, 이를 Observable로 구독하게 만든다.

const count$ = new BehaviorSubject(0);
export const counter$ = count$.asObservable();

export const increment = () => count$.next(count$.value + 1);

📂 React Hook으로 구독

function useCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const sub = counter$.subscribe(setCount);
    return () => sub.unsubscribe();
  }, []);

  return count;
}

✅ 장점

• 전역 상태를 여러 컴포넌트에서 구독 가능
• 비동기 흐름이나 사용자 이벤트도 자연스럽게 연결 가능
• combineLatest, switchMap, debounceTime 등으로 상태 흐름을 유연하게 구성

❓ 단점 혹은 고민

• 간단한 상태에도 RxJS를 도입하면 과도할 수 있음
• Subject의 수가 많아지면 관리 복잡도 증가
• 직접 next()를 호출하는 부분은 절차형처럼 느껴짐

---

즉, React에서 RxJS로 상태 관리를 한다는 것은,
전통적인 useState/useReducer 중심의 컴포넌트 상태 관리에서 벗어나
데이터 스트림 기반의 전역 상태와 흐름을 선언적으로 연결하는 것을 의미한다.