[React] 상태 관리 라이브러리, 어떤 것을 선택해야 할까?

React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다.

 

현재 사용되고 있는 React 상태 관리 라이브러리는 

제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, React Query 등 다양합니다.

 

상태 관리 라이브러리를 선택하기에 앞서, 이런 생각이 들 수도 있습니다.

 

“어차피 Redux가 제일 많이 쓰이니까 그냥 Redux를 사용하면 되지 않을까?”

 

 

물론 Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다.

그러나 Redux에도 단점이 존재하며, 모든 상황에서 적합한 것은 아닙니다.

따라서 본인의 프로젝트와 요구 사항에 적합한 상태 관리 라이브러리를 선택하는 것이 더 중요합니다.

 

그래서 오늘은 React의 다양한 상태를 먼저 이해한 후, 각 상태 관리 라이브러리의 특성과 용도를 구분해 보겠습니다.

 

 

1. 상태 관리 주체에 따른 분류

1.1 Client State

Client State는 클라이언트 내에서 생성되어 관리되는 상태를 말합니다.

 

주로 모달 열림/닫힘 여부, 폼 입력 값, 체크박스/스위치 값, 현재 페이지에서만 필요한 임시 계산 결과와 같이

UI 상태나 사용자가 화면에서만 임시적으로 사용하는 데이터를 관리할 때 주로 사용합니다.

 

React에서 Client State를 관리하는 방법에는 3가지가 있습니다.

1. 기본 Hooks 사용
   • useState, useReducer 등 기본적인 React 훅을 이용해 상태를 관리합니다.
   • 작은 규모의 상태 관리에 적합하며, 컴포넌트 내부에서만 필요한 상태일 때 주로 사용합니다.
2. Context API 사용
   • 상태를 여러 컴포넌트에 전달해야 할 때, Context API를 사용하여 전역적으로 상태를 공유할 수 있습니다.
   • 다만, 상태 업데이트가 빈번하면 성능 저하가 발생할 수 있습니다.
3. 전역 상태관리 라이브러리 사용
   • Redux, MobX, Recoil, Zustand 등을 사용하여 애플리케이션 전반에 걸쳐 상태를 공유합니다.
   • 상태가 복잡하고 여러 컴포넌트에서 참조해야 할 때 적합합니다.
   • 하지만 전역 상태를 관리하면서 구조가 복잡해지고, 성능 문제를 유발할 가능성도 있습니다.

 

전역 상태 관리 라이브러리로 Client State를 관리하는 경우, 복잡성이 증가할 수 있습니다.
특히 전역 상태 관리 라이브러리에서 서버 데이터를 직접 관리하려다 보면 비동기 처리 및 캐싱 문제가 발생할 수 있습니다.
이 때문에 전역 상태 대신 서버 데이터를 가져와 캐싱하는 방식을 도입하게 되었고,

이렇게 서버에서 가져온 상태를 Server State라고 부릅니다.

 

 

 

1.2 Server State

Server State는 서버에서 관리되고, API 요청을 통해 가져오거나 업데이트하는 상태를 말합니다. 

 

게시판 목록, 댓글 데이터, 사용자 프로필, 주문 내역 등

REST API, GraphQL, WebSocket 등을 통해 백엔드와 통신하여 얻은 데이터를 말하며, 

네트워크 요청을 통해 받아오기 때문에 로딩 상태, 에러 상태, 데이터 없음 상태 등을 고려해야 합니다.

 

React에서 Server State를 관리하는 방법에는 3가지가 있습니다.

1. React Query (TanStack Query) 사용
   • 서버 상태를 캐싱하고 자동으로 재요청(re-fetch)을 처리하여 관리가 간편합니다.
   • 로딩 상태, 에러 상태, 데이터 동기화 등을 자동으로 처리해주므로, 복잡한 서버 상태 관리에 적합합니다.
   • 특히, 전역 상태 관리 라이브러리와 조합하여 사용하면 데이터 요청 부분을 대체할 수 있어 효율적입니다.
2. SWR 사용
   • 데이터 페칭 라이브러리로, Stale-While-Revalidate 전략을 사용하여 빠른 응답과 최신 데이터를 동시에 제공합니다.
   • 클라이언트 캐싱과 데이터 재검증이 자동으로 이루어지므로, UI의 빠른 응답성이 중요할 때 적합합니다.
3. Relay/Apollo Client 사용
   • GraphQL 기반 서버 상태를 관리할 때 사용합니다.
   • 쿼리와 뮤테이션을 통해 데이터를 관리하며, GraphQL 스키마와 타입 안전성을 제공하여 대규모 애플리케이션에 적합합니다.

 

 

 

2. 상태의 접근 범위에 따른 분류

2.1 Internal State

Internal State란 특정 컴포넌트 내부에서만 관리되며, 외부에서 직접 접근할 수 없는 상태를 의미합니다.
다시 말해 UI와 밀접한 관련이 있으며, 특정 컴포넌트 내에서만 유효한 데이터입니다.

useState 혹은 useReducer로 관리하는 폼 값, 체크 상태, UI 인터랙션을 위한 임시적인 열림/닫힘 플래그 등이 있습니다.

 

React에서 Internal State를 관리하는 방법에는 아래와 같이 있습니다.

1. 기본 Hooks 사용 (함수형 컴포넌트)
2. state 사용 (클래스형 컴포넌트)

 

컴포넌트 내부에서만 관리되어 단순하고 독립적이라는 장점이 있지만,

다른 컴포넌트에서 이 데이터를 재사용해야 한다면, props drilling 등의 번거로움이 생길 수 있다는 단점도 존재합니다.

 

 

2.2 External State

External State란 컴포넌트 외부(또는 특정 모듈/시스템 범위 밖)에서 유지 및 공유되는 상태를 의미합니다.
다시 말해, 특정 컴포넌트 내부에 국한되지 않고, 여러 컴포넌트나 페이지에서 접근 가능한 공용 상태입니다.

Redux 스토어, Recoil Atom, MobX 스토어, 브라우저 스토리지(localStorage, sessionStorage), 서버 상태 등이 있습니다.

 

React에서 External State를 관리하는 방법에는 아래와 같이 있습니다.

1. Redux, Recoil, MobX 등 전역 상태관리 라이브러리 사용
2. Context API 사용

 

여러 컴포넌트에서 동일 데이터를 쉽게 공유할 수 있다는 장점이 있지만,

의존성이 커지고, 구조가 복잡해지면 “상태를 어디서 어떻게 업데이트하고 누가 구독하는가”가 스파게티처럼 꼬일 수 있다는 단점이 있습니다.

 

 

 

 

 

---

참고 

https://velog.io/@jay/10-minute-react-query-concept