11단계: Redux 상태관리

11-1. Redux란 무엇인가?

Redux는 전역 상태를 중앙에서 관리하고 예측 가능한 상태 흐름을 유지하는 상태관리 라이브러리입니다.
상태 변경은 반드시 액션을 통해 이뤄지며, 상태는 순수 함수인 리듀서로만 변경할 수 있습니다.

11-2. 핵심 개념 요약

Store: 전체 상태가 저장되는 객체
Action: 상태 변경을 설명하는 객체
Reducer: 현재 상태와 액션을 받아 새 상태 반환
Dispatch: 액션을 실행하는 함수

11-3. Redux Toolkit 설치

npm install @reduxjs/toolkit react-redux

11-4. Slice 단위 구성

import { createSlice } from '@reduxjs/toolkit';

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

export const { increase, decrease } = counterSlice.actions;
export default counterSlice.reducer;

11-5. Store 생성 및 Provider 연결

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

import { Provider } from 'react-redux';

<Provider store={store}>
  <App />
</Provider>

11-6. useSelector와 useDispatch

const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

<button onClick={() => dispatch(increase())}>+</button>

11-7. 비동기 처리 (createAsyncThunk)

export const fetchData = createAsyncThunk('data/fetch', async () => {
  const response = await fetch('/api/data');
  return await response.json();
});

요약

Redux는 상태를 예측 가능하게 중앙에서 관리할 수 있는 도구
Redux Toolkit을 사용하면 반복 코드가 줄고 직관적
useSelector, useDispatch로 컴포넌트에서 쉽게 접근
비동기 처리도 createAsyncThunk로 간결하게 구현 가능

심화학습

Q1. Redux Toolkit을 사용하면 기존 Redux보다 어떤 점이 좋아지나요?
A1. 액션/리듀서/타입 선언이 줄고, 불변성 처리를 Immer가 자동으로 해줍니다. 코드가 간결하고 직관적입니다.

Q2. 전역 상태를 과하게 쓰면 생기는 문제는?
A2. 모든 컴포넌트가 전역 상태를 참조하면 리렌더링 범위가 넓어져 성능 저하가 발생할 수 있고, 상태 추적이 어려워집니다.

Q3. useSelector와 Context API는 어떤 차이가 있나요?
A3. useSelector는 상태 변경에 따라 필요한 컴포넌트만 리렌더링되며, Context는 모든 하위 컴포넌트를 리렌더링합니다. 규모가 커지면 Redux가 더 유리합니다.