Redux Toolkit 활용 실습(1): 초기 설정

Redux Toolkit을 사용해서 Redux 기능 개선하기

이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 초기 설정 복잡성을 해결하는 방법을 설명합니다. 특히 createSlice와 configureStore를 사용하여 기존 방식과 비교하여 얼마나 간소화될 수 있는지를 Before -> After 형식으로 실습 코드 위주로 알아보겠습니다.

1. 초기 설정의 복잡한 문제 해결 방법

Redux를 처음 사용하는 개발자들은 초기 설정이 복잡하고 번거롭다고 느낄 수 있습니다. 기존 방식에서는 스토어, 리듀서, 액션 등을 여러 파일에 분리하여 작성해야 했지만, Redux Toolkit을 사용하면 이러한 과정을 간소화할 수 있습니다. 먼저 기존 방식과 Redux Toolkit 방식을 비교해 보겠습니다.

 

Before: 기존 Redux 설정 방식

기존 Redux 방식에서는 각 단계마다 별도로 파일을 생성하고 설정해야 합니다. 아래는 전형적인 Redux 설정의 예입니다.

1. React 애플리케이션 생성 먼저 React 애플리케이션을 생성합니다. 아래 명령어를 사용하여 새로운 React 프로젝트를 만듭니다.

   npx create-react-app my-redux-app
   cd my-redux-app

   
   
2. 액션 타입 정의

   // src/actions/actionTypes.js
   export const INCREMENT = 'INCREMENT';
   export const DECREMENT = 'DECREMENT';

3. 액션 생성자

   // src/actions/counterActions.js
   import { INCREMENT, DECREMENT } from './actionTypes';
   
   export const increment = () => ({
     type: INCREMENT,
   });
   
   export const decrement = () => ({
     type: DECREMENT,
   });

4. 리듀서 작성

   // src/reducers/counterReducer.js
   import { INCREMENT, DECREMENT } from '../actions/actionTypes';
   
   const initialState = {
     count: 0,
   };
   
   const counterReducer = (state = initialState, action) => {
     switch (action.type) {
       case INCREMENT:
         return {
           ...state,
           count: state.count + 1,
         };
       case DECREMENT:
         return {
           ...state,
           count: state.count - 1,
         };
       default:
         return state;
     }
   };
   
   export default counterReducer;

5. 스토어 설정

   // src/store/store.js
   import { createStore } from 'redux';
   import counterReducer from '../reducers/counterReducer';
   
   const store = createStore(counterReducer);
   
   export default store;

이러한 설정은 파일이 많고 코드가 반복되는 경향이 있어, 초기 설정이 번거롭고 유지보수가 어렵습니다.

 

After: Redux Toolkit을 사용한 설정 방식

Redux Toolkit을 사용하면 이러한 복잡한 과정을 간소화할 수 있습니다. createSlice와 configureStore를 사용하여 모든 설정을 하나의 파일에서 간단하게 처리할 수 있습니다.

1. React 애플리케이션 생성 먼저 React 애플리케이션을 생성합니다.

   npx create-react-app my-redux-toolkit-app
   cd my-redux-toolkit-app

   
   
2. createSlice를 사용하여 리듀서 및 액션 설정

   // src/features/counter/counterSlice.js
   import { createSlice } from '@reduxjs/toolkit';
   
   const counterSlice = createSlice({
     name: 'counter',
     initialState: {
       count: 0,
     },
     reducers: {
       increment: (state) => {
         state.count += 1;
       },
       decrement: (state) => {
         state.count -= 1;
       },
     },
   });
   
   export const { increment, decrement } = counterSlice.actions;
   export default counterSlice.reducer;

   createSlice를 사용하면 리듀서와 액션을 한 번에 정의할 수 있습니다. 코드의 양이 줄어들고 가독성이 높아집니다.
3. configureStore를 사용하여 스토어 설정

   // src/app/store.js
   import { configureStore } from '@reduxjs/toolkit';
   import counterReducer from '../features/counter/counterSlice';
   
   const store = configureStore({
     reducer: {
       counter: counterReducer,
     },
   });
   
   export default store;

   configureStore는 기본적인 스토어 설정을 자동으로 처리해주므로, 설정 과정이 훨씬 간단해집니다. 또한 여러 리듀서를 쉽게 통합할 수 있는 구조를 제공합니다.
   

   

   전통적인 Redux 설정과 Redux Toolkit 설정을 비교

요약

• 기존 방식: 액션 타입, 액션 생성자, 리듀서, 스토어를 각각 별도의 파일에 작성해야 하므로 초기 설정이 복잡하고 코드가 장황해지기 쉽습니다.
• Redux Toolkit 방식: createSlice와 configureStore를 사용하여 리듀서, 액션 생성, 스토어 설정을 간소화할 수 있습니다. 코드의 양이 줄어들고 유지보수가 용이합니다.

실습 코드 요약

• 기존 방식에서는 여러 단계로 나누어 설정하던 복잡한 과정을 Redux Toolkit의 createSlice와 configureStore를 사용하여 단순화할 수 있었습니다.
• Redux Toolkit을 사용하면 코드가 더 간결하고 직관적이어서, 초기 설정을 보다 빠르고 쉽게 완료할 수 있습니다.

전체 실습 절차 및 코드 보기