#State Management

리액트의 전통적인 가상 DOM 리렌더링 한계를 넘어, 세밀한 값 변화 추적(Fine-grained Reactivity)을 통해 컴포넌트 단위 리렌더링 없이 UI를 초고속 업데이트하는 Signal 기반 상태 관리의 원리와 실무 적용 가이드.

결제 플로우의 상태를 if문과 boolean 플래그로 관리하다 버그 지옥에 빠졌다. XState의 상태 머신으로 불가능한 상태를 원천 차단한 경험.

Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.

isLoading, isError, data를 따로 관리하다가 불가능한 상태 조합이 생겼다. Discriminated Union으로 상태를 완벽하게 표현한 이야기.

API 요청 상태를 관리할 때 불리언 플래그 여러 개를 쓰시나요? 'impossible state(불가능한 상태)'를 방지하고, if 문 도배를 없애는 Discriminated Unions 패턴.

전역 상태 관리를 위해 Redux 대신 Context API를 선택했습니다. 하지만 `UserContext`에 모든 정보를 담자마자 앱 전체가 리렌더링되기 시작했습니다. Context 분리(Splitting) 전략.

React 개발 초기, 데이터를 5단계 깊이로 전달하다가 멘붕에 빠진 경험을 공유합니다. Prop Drilling이 왜 유지보수의 적인지, 그리고 Context API, Composition(합성), Zustand를 사용해 이 지옥에서 우아하게 탈출하는 3가지 실제 패턴을 정리합니다.

React의 setState가 비동기로 동작해서 겪었던 삽질과 해결 과정. 사학과 출신 창업자가 겪은 React 상태 관리의 미스터리를 풉니다.

Context API를 사용할 때마다 앱이 느려지는 경험, 해보셨나요? Provider의 Value가 바뀔 때 모든 하위 컴포넌트가 리렌더링되는 근본적인 이유인 '객체 참조' 문제와 React reconciler의 작동 방식을 분석합니다. 이를 막기 위한 3가지 솔루션(State 분리, Memoization, Dispatch 분리)과 Zustand/Recoil 같은 외부 라이브러리로의 마이그레이션 기준을 명확히 제시합니다.