상태 관리 개요 (Global State & Server State)
프론트엔드 애플리케이션이 커질수록 상태는 점점 복잡해진다. 어떤 상태를 어디에서, 어떻게 관리할 것인가를 명확하게 정하지 않으면, 코드는 금방 복잡해지고 유지보수가 어려워진다.
이 글에서는 React 애플리케이션의 상태를 어떻게 분류하고,
어떤 상태를 어떤 도구로 관리하는 것이 좋은지 정리해보려고 한다.
왜 상태 관리가 중요할까?
리액트 애플리케이션이 커질수록 상태는 여러 컴포넌트로 흩어지고, 어디에서 어떤 값이 변경되는지 추적하기 어려워진다. 또한 props drilling, 복잡한 의존성, Context API의 성능 한계 같은 문제가 생기기 쉽다.
그래서 “어떤 상태를 어디에서 관리할 것인가?”를 명확히 나누는 것이 중요하다.
React 앱의 상태 분류
React 애플리케이션의 상태는 크게 다음 세 가지로 나눌 수 있다.
- 지역 상태(Local State): 특정 컴포넌트 내부에서만 사용하는 값
- 전역 상태(Global State): 여러 컴포넌트가 함께 공유하는 값
- 서버 상태(Server State): 서버에서 가져온 데이터를 포함한 비동기 상태 전체
한 눈에 보는 비교
| 종류 | 어디에 저장? | 언제 필요? | 예시 |
|---|---|---|---|
| Local State | 특정 컴포넌트 내부 | UI 제어, 입력 값 처리 | input 값, 모달 열림 여부 |
| Global State | 앱 전역 | 여러 컴포넌트에서 공유 | 로그인 정보, 테마, 장바구니 |
| Server State | 서버 + 클라이언트 캐시 | API 데이터 & 비동기 흐름 관리 | 게시글 목록, 사용자 데이터, 검색 결과 |
전역 상태 (Global State)
전역 상태는 여러 컴포넌트에서 공유되며, 어디서든 읽고 수정 가능해야 하는 상태를 의미한다.
예를 들어:
- 사용자 인증 정보 (로그인 여부, 사용자 프로필 등)
- 테마 정보 (다크 모드 / 라이트 모드)
- 장바구니 정보 (담긴 상품 목록, 총 금액)
이런 값들은 특정 페이지 하나에만 머물지 않고,
앱 전반에서 사용되기 때문에 전역 상태로 관리하는 것이 일반적이다.
전역 상태 관리를 돕는 도구들
Context API
- 전역 상태 관리를 위한 기능이라기 보다는,
Props Drilling문제를 해결하기 위한 React 내장 기능 - 테마, 현재 로그인 유저 정보처럼 특정 데이터 공유에 적합
- 단점: Context의 value가 변경되면 해당 Context를 구독하는 컴포넌트들이 리렌더링됨
외부 상태 관리 라이브러리
이 라이브러리들의 목표는 하나다.
여러 컴포넌트에서 공유되는 상태를 예측 가능하고 안정적인 방식으로 관리하는 것
서버 상태 (Server State)
서버 상태는 다음과 같은 특징을 가진 상태다.
- 데이터의 원본은 서버에 있음
- 항상 네트워크 요청이 동반됨
- 단순 데이터뿐만 아니라 아래와 같은 정보까지 함께 포함된다.
- isLoading
- isError
- status
- refetch
- 캐싱 전략(staleTime, cacheTime(v4) / gcTime(v5))
- 클라이언트가 소유권을 갖지 않음 (서버가 원본)
- 시간이 지나면 stale해질 수 있음
예시:
- 게시글 목록 API
- 댓글 목록 API
- 사용자 정보 API
- 검색 결과 API
즉, 서버 상태는 단순히 데이터만이 아니라, 데이터 + 비동기 흐름 전체를 포함하는 상태라고 볼 수 있다.
서버 상태 관리를 돕는 도구들
서버 상태는 단순히 데이터를 불러오는 것뿐 아니라, 캐싱, 동기화, 리트라이, 에러 핸들링 등비동기 흐름 전체를 함께 관리해야 한다. 그래서 라이브러리를 사용하는 것이 일반적이다.
대표적인 서버 상태 라이브러리
RTK Query는 무엇이 다를까?
- Redux Toolkit에 포함된 데이터 페칭 및 캐싱 솔루션
- TanStack Query / SWR 과 비슷하지만, Redux의 철학(단일 스토어, 액션 기반)을 따름
- 캐싱 / 자동 리페치 / invalidate / 요청 상태 관리 지원
- Redux Store 위에서 동작하기 때문에, Redux를 사용하는 프로젝트라면 함께 사용하기 좋다.