노트Redux 이후의 상태 관리 선택
State Management Libraries
프런트엔드#react · 연결된 개념 8개
쉽게 말하면
예전엔 앱의 상태를 전부 Redux라는 큰 창고 하나에 넣었는데, 이제는 서버 데이터, URL, 한 화면용, 여러 곳 공유용으로 나눠 각자 맞는 도구에 맡겨요. 물건 종류마다 보관할 곳을 따로 고르는 거죠.
비유가 깨지는 곳 Context도 보관 장소처럼 보이지만 실제로는 값을 아래로 건네는 주입 장치예요. 자주 바뀌는 값을 넣으면 구독한 컴포넌트가 모두 리렌더돼요. Redux도 큰 팀의 복잡한 로직엔 여전히 선택지예요.
한때 React 앱의 기본값이던 Redux는 2025~2026년 기준으로 여러 선택지 중 하나가 됐다. 상태를 종류별로 나눠 각자에 맞는 도구를 고르는 방식이 자리 잡았기 때문이다.
Redux가 기본값에서 내려온 이유
- 보일러플레이트(Boilerplate): 기능 하나에 액션 타입·액션 생성자·리듀서가 따로 필요했다
- React 자체의 발전: 훅 이후
useState·useReducer·Context로 지역·공유 상태를 꽤 처리할 수 있게 됐다
- 서버 상태의 분리: API(Application Programming Interface) 데이터의 캐싱·로딩·재요청은 TanStack Query가 더 잘한다. Redux에 들어 있던 상태의 상당 부분이 원래 서버 상태였다
- 비동기의 복잡성: thunk·saga·observable 등 미들웨어가 난립했고 표준이 없었다
- 가벼운 대안: Zustand(작은 스토어 + 훅), Jotai(원자 단위 상태, Atomic State)가 훨씬 적은 코드로 같은 일을 한다
고르는 기준
- 서버에서 온 데이터 → TanStack Query
- URL(Uniform Resource Locator)로 표현할 수 있는 상태(필터, 페이지) → URL 검색 파라미터
- 한 컴포넌트 근처에서만 쓰는 상태 →
useState, 가능하면 아래로 내린다(상태 내리기와 컴포지션으로 리렌더 줄이기)
- 여러 곳이 공유하는 클라이언트 상태 → Zustand·Jotai
- 크고 복잡한 상태 로직, 엄격한 이벤트 기록이 필요한 대규모 팀 → Redux Toolkit(보일러플레이트를 크게 줄인 공식 도구)
Context는 상태 관리 도구가 아니라 값을 아래로 전달하는 주입 장치다. 자주 바뀌는 값을 Context에 넣으면 구독하는 컴포넌트가 모두 리렌더된다(의존성 주입 (DI)). 최신 외부 스토어 라이브러리는 useSyncExternalStore로 React와 연결돼 상태 찢어짐(Tearing)에도 안전하다. 구독 구조 자체는 옵저버 패턴이다.
연결된 개념
이 노트를 가리키는 문서
뜻이 가까운 노트
- 상태 패턴
객체의 행동이 현재 상태에 따라 달라질 때, 상태마다 별도 객체를 두고 현재 상태 객체에 행동을 맡기는 패턴. 상태별 조건문이 메서드마다 반복되는 문제를 푼다.
- React 상태 갱신
React는 상태를 직접 고치지 않고 새 값을 setState로 넘겨야 다시 그린다. 이전 값과 Object.is로 비교하므로, 같은 객체를 고친 뒤 넘기면 바뀐 줄 모른다.
- Effect가 필요 없는 경우
Effect는 외부 시스템과 동기화할 때 쓰는 탈출구(Escape Hatch)다. 렌더 중에 계산할 수 있는 값이나 사용자 이벤트 처리에 Effect를 쓰면 렌더가 한 번 더 일어나고 흐름이 꼬인다. React 공식 문서가 이런 경우를 따로 정리해 두었다.
- useActionState와 폼 액션
React 19에서는 <form action={함수}>에 함수를 바로 넘길 수 있고, useActionState가 그 액션의 대기 상태와 마지막 결과를 한 훅으로 관리한다. useState + onSubmit + 로딩 플래그로 짜던 패턴을 대체한다.
- 서버 렌더에서 훅이 하는 일
서버 렌더(Server-Side Rendering, SSR)에서도 컴포넌트 함수는 실제로 호출되고, 그 안의 훅도 호출은 된다. 다만 서버에는 커밋(DOM 반영)이 없어서, 렌더 중 동기적으로 값을 계산하는 훅만 일하고 커밋 뒤에 도는 훅은 아무것도 하지 않는다. "이 훅은 클라이언트에서만 동작한다"는 말은 대개 "Effect 안의 일은 클라이언트에서만 일어난다"는 뜻이다.