오늘 GeekNews에서 가장 최신의 개발 글 중 하나입니다. 원문은 React 생태계의 상태 관리 문제를 도구 선택 문제가 아니라 상태의 구조 문제로 정리합니다. news.hada.io, hackers.pub
제시하는 핵심 문제는 네 가지입니다.
상태의 공유 범위, 상태의 수명, 파생 상태의 공유, 기능 단위 응집입니다. 예를 들어 한 컴포넌트에서 시작한 값이 여러 곳에서 필요해지면 useState → props → Context로 표현 자체가 바뀌고, Zustand 같은 전역 store에 넣으면 이번에는 페이지를 떠나도 상태가 살아남는 lifecycle 문제가 생깁니다. hackers.pub
또 같은 서버 데이터와 필터에서 계산되는 파생 데이터를 여러 component의 hook에서 각각 만들면 논리적으로 같은 상태를 각 component가 별도로 계산하고 별도의 object reference를 갖는 문제도 지적합니다. 단순 useMemo는 component 단위 cache이므로 애플리케이션 전체의 공유 파생 상태 문제를 해결하지 못합니다. hackers.pub
실무적으로 가져갈 부분
React 프로젝트에서는 상태를 단순히:
Local vs Global
두 종류로 나누기보다 다음처럼 보는 편이 낫습니다.
Server State
Feature-scoped State
Page-scoped State
Session State
Application Global State
Derived State
특히 “어디서 읽는가”보다 “언제 만들어지고 언제 죽어야 하는가”를 먼저 정의하면 Zustand·Context·TanStack Query를 뒤섞으면서 생기는 stale state 문제를 상당히 줄일 수 있습니다.