효과적인 React 공유 상태 관리 패턴

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 애플리케이션 개발자(중급 이상), 상태 관리 패턴 선택에 고민하는 개발자

핵심 요약

useState/useReducer: 로컬 상태 관리에 적합, 복잡한 상태 업데이트 시 useReducer 사용
Context API: 흔한 값(인증, 테마 등)에 적합, 빈번한 업데이트는 피해야 함
Redux Toolkit: 기업급 애플리케이션에서 전역 상태와 비즈니스 로직 관리 권장
Zustand/Jotai: 간단한 상태 관리에 최적화, 별도의 리듀서 없이 사용 가능
React Query/SWR: 서버 상태(데이터 조회) 관리에 특화, Redux와 별도로 사용 권장

섹션별 세부 요약

공유 상태 관리의 중요성

React 애플리케이션 확장 시 상태 관리의 복잡성 증가
useState/useReducer는 로컬 상태에 적합, 전역 상태는 복잡성 유발
상태 유형(로컬/전역/서버)에 따라 적절한 패턴 선택 필요

로컬 상태 관리

useState는 단순한 상태(예: 모달 열림 여부)에 적합
useReducer는 복잡한 상태 업데이트(예: 폼 로직, 언도-리도 기능)에 유리
useReducer 예시:

```js

const [state, dispatch] = useReducer(reducer, { count: 0 });

```

Context API 활용

인증, 테마 등 흔한 값에 적합, 전역 접근 가능
예시:

```js

const AuthContext = createContext();

export const AuthProvider = ({ children }) => { ... };

```

주의사항: 값 변경 시 모든 소비 컴포넌트 재렌더링됨

Redux Toolkit 사용법

RTK는 복잡한 전역 상태 관리에 적합, createSlice로 상태 정의
예시:

```js

const counterSlice = createSlice({ name: 'counter', initialState: { value: 0 }, reducers: { increment: (state) => { state.value++ }, } });

```

TypeScript, DevTools, redux-persist와 호환 가능

Zustand/Jotai의 장점

최소한의 설정으로 상태 관리 가능, useReducer/Context 없이 사용
예시:

```js

const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), }));

```

React Query/SWR의 역할

서버 상태(예: API 데이터) 관리에 특화, 캐싱, 리패치, 에러 처리 자동화
예시:

```js

const { data, isLoading } = useQuery(['todos'], fetchTodos);

```

서버 상태와 UI 상태 분리 필요

패턴 선택 가이드

상태 범위, 업데이트 빈도, 지속성 필요 여부에 따라 패턴 선택
대규모 앱에서는 Context + Zustand + React Query 조합 권장

결론

React 애플리케이션에서 공유 상태를 관리할 때는 useState/useReducer, Context, Redux Toolkit, Zustand, React Query 등 다양한 패턴을 조합하여 사용해야 합니다. 상태의 범위와 업데이트 빈도를 고려해 적절한 도구를 선택하는 것이 중요합니다. 예를 들어, 서버 상태는 React Query로, 복잡한 로직은 Redux Toolkit으로, 간단한 상태는 Zustand로 처리하면 유지보수성과 성능을 균형 있게 관리할 수 있습니다.