[Redux Toolkit] 상태 관리를 효율적으로 설계하는 법

728x90

Redux Toolkit 

React로 애플리케이션을 개발하다 보면 컴포넌트끼리 상태(state)를 공유하고 관리하는 게 점점 복잡해집니다. 이런 문제를 해결하기 위해 등장한 대표적인 상태 관리 라이브러리가 바로 Redux입니다. 그리고 Redux를 더 쉽고 간단하게 쓰기 위해 나온 것이 바로 Redux Toolkit(RTK)이죠.

 

---

1.  Redux란?

Redux는 애플리케이션의 상태를 중앙에서 관리할 수 있도록 도와주는 JavaScript 라이브러리입니다. React와 함께 많이 사용되지만, 실제로는 프레임워크에 종속되지 않습니다.

Redux를 쓰는 이유

• 상태를 예측 가능하게 만들기 위해
• 여러 컴포넌트에서 공통 상태를 공유하고 관리하기 위해
• 디버깅, 테스트, 개발도구 연동이 쉬운 구조를 만들기 위해

 

---

2.  Redux의 핵심 개념 3가지

Redux는 단순한 구조로 구성되어 있습니다.

1. Store : 전체 앱의 상태를 담고 있는 객체
2. Action : 상태에 일어난 변화(의도)를 설명하는 객체
3. Reducer : 현재 상태와 Action을 기반으로 새로운 상태를 반환하는 함수

 

---

3.  간단한 Redux 흐름 예제

// Action
const increment = { type: 'counter/increment' };

// Reducer
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/increment':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

// Store 생성
import { createStore } from 'redux';
const store = createStore(counterReducer);

// 사용
store.dispatch(increment);
console.log(store.getState()); // { value: 1 } 

 

---

4.  Redux의 단점

Redux는 강력하지만, 다음과 같은 불편함이 있습니다.

• 보일러플레이트 코드가 많음 (action type, creator, reducer 전부 수동 작성)
• 코드 구조가 장황해짐
• 작은 상태 관리에도 지나치게 복잡해질 수 있음

그래서 등장한 것이 Redux Toolkit (RTK) 입니다.

 

---

5.  Redux Toolkit (RTK)

Redux Toolkit은 Redux 팀에서 공식으로 만든 Redux 개발 표준 도구 모음입니다. 기존 Redux의 단점(복잡함, 장황함)을 해결하고, 실무에 적합한 기능들을 모아 제공합니다.

주요 특징

• createSlice로 액션 + 리듀서를 한번에 정의
• configureStore로 미들웨어, DevTools 설정 간편화
• immer 내장 → 불변성 신경 안 써도 됨
• 비동기 작업을 위한 createAsyncThunk 제공

 

---

6.  Redux Toolkit 예제

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

// Slice 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1; // 불변성 알아서 처리됨!
    },
    decrement: state => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

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

store.dispatch(increment());
console.log(store.getState()); // { counter: { value: 1 } }

 

---

7.  Redux Toolkit에서 비동기 처리 : createAsyncThunk

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

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId) => {
    const res = await fetch(`/api/user/${userId}`);
    return res.json();
  }
);

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle' },
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

• createAsyncThunk를 사용하면 비동기 로직도 상태와 함께 깔끔하게 관리할 수 있습니다.

 

---

8.  Redux Toolkit이 실무에서 유리한 이유

항목	기존 Redux	Redux Toolkit
액션/리듀서 구조	분리되어 번거로움	createSlice로 통합
불변성 처리	직접 처리 필요	immer로 자동 처리
스토어 설정	수동 설정	configureStore로 간편
비동기 로직	미들웨어 설정 필요	createAsyncThunk 제공
코드량	많음	훨씬 간결함

 

---

9.  마무리

Redux는 상태 관리를 예측 가능하고 안정적으로 만들어주는 도구입니다. 하지만 복잡한 구조 때문에 진입 장벽이 높았습니다. Redux Toolkit은 그런 불편함을 대폭 줄여주며, Redux를 현대적인 방식으로 쓸 수 있도록 도와줍니다.

함께 보면 좋은 자료

블로그 글 : 

[Redux] React 상태 관리를 위한 예측 가능한 컨테이너

 

---