[React] 상태 관리 방법 정리표 (전역/로컬)

리액트의 상태 관리 방법에는 여러 가지가 있다. 효과적인 상태 관리는 매우 중요하다. 상태 관리의 핵심은 어떻게 애플리케이션의 데이터를 구조화하고 관리하는가에 달려있다. 크게는 로컬 상태 관리와 전역 상태 관리를 기준으로 나눌 수 있다.

 

리액트 상태 관리 방법 정리표

관리 방법	로컬/전역	주요 특징	주요 사용 시점
useState Hook	로컬	- 함수형 컴포넌트에서 상태를 관리하는 데 사용됨	작은 규모의 컴포넌트 또는 컴포넌트 간 통신에 적합
useReducer Hook	로컬	- 복잡한 상태 로직을 다룰 때, 이전 상태와 액션을 활용하여 상태를 업데이트 - 컴포넌트 로직을 분리하고 예측 가능한 상태 관리 가능	복잡한 상태 로직이나 컴포넌트 간 통신이 많은 경우
Context API	전역	- 컴포넌트 트리 전체에서 데이터를 전달할 수 있는 React 내장 API - Provider 및 Consumer로 구성	대규모 애플리케이션 또는 전역 상태 관리가 필요한 경우
Redux	전역	- 상태 관리 라이브러리로 단일 스토어에서 상태를 효과적으로 관리 - Actions, Reducers, Store로 구성	대규모 애플리케이션 또는 복잡한 상태 로직이 필요한 경우
MobX	전역	- 상태 관리 라이브러리로 반응형 상태를 쉽게 관리 가능 - Observables, Actions, Reactions로 구성	단순하고 반응적인 상태 관리가 필요한 경우
Recoil	전역	- 상태를 전역적으로 관리하는 데 사용되는 상태 관리 라이브러리 - Atom, Selector, RecoilRoot로 구성	대규모 애플리케이션 또는 복잡한 상태 로직이 필요한 경우
Zustand	로컬/전역	- 작은 규모의 애플리케이션 또는 로컬 상태 관리에 유용한 상태 관리 라이브러리	작은 규모의 애플리케이션 또는 로컬 상태 관리가 필요한 경우
React Query	전역	- 서버 데이터 또는 비동기 작업에 특화된 상태 관리 라이브러리 - Queries, Mutations, QueryClient로 구성	비동기 작업이 많은 경우 또는 서버 데이터 관리가 필요한 경우
SWR (Stale-While-Revalidate)	전역	- 서버 데이터 및 상태를 효과적으로 관리하는 데 사용되는 리액트 훅 라이브러리	서버 데이터에 대한 최적화된 상태 관리가 필요한 경우
Apollo Client	전역	- GraphQL을 사용하는 애플리케이션에서 데이터를 효과적으로 관리하는 클라이언트 라이브러리	GraphQL을 사용하고 있는 경우
Easy Peasy	전역	- Redux 기반의 상태 관리 라이브러리로 간단한 API 및 적은 설정으로 상태를 관리할 수 있음	Redux 기반으로 간편한 상태 관리가 필요한 경우
XState	전역	- 상태 머신(State Machine)을 활용하여 상태 관리하는 JavaScript 라이브러리	상태가 복잡하거나 특정한 순서에 따라 상태를 변경해야 하는 경우
Jotai	로컬/전역	- 리액트 애플리케이션에서 상태를 관리하기 위한 간단하고 직관적인 라이브러리	적은 코드로 상태를 효과적으로 관리하고자 할 때
Valtio	로컬/전역	- 리액트 상태를 관리하기 위한 간단하고 효율적인 라이브러리	작은 규모의 프로젝트 또는 로컬 상태 관리가 필요한 경우
Overmind	전역	- 간결하고 직관적인 구문으로 상태 관리를 할 수 있는 상태 관리 라이브러리	대규모 애플리케이션 또는 간단하게 상태를 관리하고자 할 때

 

 

주요 방식 설명

Context API와 Hooks

React의 Context API와 Hooks를 사용한 로컬 상태 관리는 여전히 많은 프로젝트에서 사용되고 있다. 특히 함수형 컴포넌트와 Hooks를 적극적으로 활용하는 트렌드가 이어지면서 useState와 useContext를 조합하여 간단한 상태 관리를 구현하는 경우가 많다.

 

Redux 및 Redux Toolkit

Redux는 대규모 애플리케이션에서의 상태 관리에 많이 사용된다. 최근에는 Redux Toolkit이라는 Redux를 편리하게 사용할 수 있는 도구가 소개되었는데, 코드를 단순화하고 개발자 경험을 개선하는 데 도움을 준다.

 

React Query 및 SWR

비동기 데이터 요청 및 상태 관리를 위한 라이브러리로는 React Query와 SWR이 주목받고 있다. 특히 서버와의 데이터 통신 및 상태 업데이트에 특화되어 있어, GraphQL이나 RESTful API와 효과적으로 통합된다.

 

Zustand와 Recoil

Zustand와 Recoil 같은 라이브러리는 비교적 가벼우면서도 효율적인 전역 상태 관리를 제공한다. 특히 Zustand는 간단한 API와 작은 번들 크기로 주목받고 있다.

 

GraphQL과 Apollo Client

GraphQL을 사용하는 프로젝트에서는 Apollo Client와 함께 GraphQL 쿼리 및 상태 관리를 위한 솔루션으로 사용되고 있다.

 

 

그 외에도 다양한 상태 관리 라이브러리들도 사용되고 있다. 예를 들어, XState는 상태 머신을 기반으로 한 상태 관리를 제공하며, Overmind는 간결한 구문과 직관적인 API로 주목을 받고 있다.

상태 관리는 전역 상태 관리가 필요하거나 비동기 상태 관리가 필요한 경우에 따라 적절한 방법이 선택되는 경향이 있다. 프로젝트의 특성, 요구 사항, 개발자의 선호도 등을 고려하여 상태 관리 방법을 선택하는 것이 중요하다.