왜 Redux Toolkit을 사용해야 하나요? 클래식 Redux는 왜 안 될까요?

Source: Dev.to

Introduction

Redux를 처음 배우기 시작했을 때, 보일러플레이트가 바로 그 방식이라고 생각했습니다. 간단한 기능을 관리하려면 다음이 필요했습니다:

• Action types
• Action creators
• Reducers
• Store configuration

처음엔 “전문적”이라고 느껴졌지만, 며칠 지나자 반복적이고 지치는 작업이 되었습니다.

Problems with Classic Redux

하나의 기능만 구현해도 여러 파일을 오가야 했습니다:

• actions.js – 상수와 함수 작성
• reducers.js – switch 문 작성
• store.js – 스토어 설정

같은 패턴이 코드베이스 전체에 반복돼 작은 상태 업데이트조차 무겁게 느껴졌습니다.

Redux Toolkit: A Modern Approach

Redux Toolkit (RTK)은 불필요한 복잡성을 없애면서 Redux의 강력함을 유지합니다. 두 가지 핵심 함수가 내 이해를 완전히 바꿨습니다: configureStore와 createSlice.

configureStore

Classic Redux

import { createStore, combineReducers, applyMiddleware } from 'redux';
const store = createStore(
  combineReducers({ /* reducers */ }),
  applyMiddleware(/* middleware */)
);

Redux Toolkit

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

내부 설정(미들웨어, DevTools 연동 등)이 자동으로 처리됩니다.

createSlice

Classic Redux

// action types
const INCREMENT = 'counter/increment';

// action creators
export const increment = () => ({ type: INCREMENT });

// reducer
export default function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, value: state.value + 1 };
    default:
      return state;
  }
}

Redux Toolkit

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

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

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

createSlice는 액션 생성자와 리듀서를 자동으로 생성해, 세·네 개의 별도 코드를 하나의 간결한 정의로 대체합니다.

Migration Strategy

한 번에 모든 것을 바꿀 필요는 없습니다. Classic Redux와 Redux Toolkit은 같은 프로젝트에서 동시에 존재할 수 있으며, 둘 다 기존 방식대로 React와 연결됩니다. 이를 통해 압박 없이 점진적인 마이그레이션이 가능합니다.

Conclusion & Advice

Redux Toolkit을 이해하면 Redux가 간단하고 실용적으로 느껴집니다:

• 보일러플레이트 감소
• 파일에 흩어져 있던 switch 문 제거
• 관련 로직이 모두 한곳에 모임

지금 Redux를 배우고 있다면, Classic Redux에 머무르지 마세요. 초기부터 Redux Toolkit을 사용하면 시간과 에너지, 그리고 많은 혼란을 절약할 수 있습니다.