Redux 마스터(5): Redux Toolkit 소개 및 실전 사용

Redux Toolkit 소개 및 실전 사용

이번 강의에서는 Redux Toolkit을 소개하고, 이를 통해 Redux의 복잡한 설정 과정을 단순화하는 방법을 배웁니다. Redux Toolkit은 createSlice와 configureStore와 같은 유용한 툴을 제공하여 Redux의 설정을 쉽고 효율적으로 처리할 수 있게 도와줍니다.

Redux Toolkit 사용

1. Redux Toolkit이란?

Redux Toolkit은 Redux를 쉽게 설정하고, 보일러플레이트 코드를 줄여주는 유틸리티를 제공합니다. 전통적인 Redux 사용법에서는 action, reducer, store 등을 모두 별도로 작성해야 하지만, Redux Toolkit은 이를 간소화하고 다양한 기능을 내장하고 있습니다.

주요 특징:

• createSlice: 액션과 리듀서를 한꺼번에 생성.
• configureStore: 스토어 설정을 단순화하고 미들웨어를 자동으로 적용.
• 내장된 DevTools 및 미들웨어: Redux DevTools와 같은 유용한 개발 도구가 자동으로 설정됨.

2. Redux Toolkit 설치

우선, Redux Toolkit을 설치하는 것으로 시작합니다.

설치 명령어:

bash

코드 복사

npm install @reduxjs/toolkit react-redux

3. Redux Toolkit 사용하기: createSlice

createSlice는 액션과 리듀서를 한꺼번에 정의할 수 있게 해주는 유틸리티입니다. 기존 방식에서 액션 생성자와 리듀서를 각각 작성해야 했던 번거로움을 해결해 줍니다.

예시: 간단한 카운터 기능 구현

npm install @reduxjs/toolkit react-redux

 

이 코드는 counterSlice라는 슬라이스를 생성하고, 카운터의 상태를 관리하는 리듀서와 액션을 정의한 예시입니다. 각각의 액션을 별도로 정의할 필요 없이 createSlice를 통해 리듀서와 액션을 동시에 생성할 수 있습니다.

4. 스토어 설정: configureStore

configureStore는 Redux 스토어를 설정하는 유틸리티입니다. 미들웨어 설정과 Redux DevTools 사용을 자동으로 설정해 주기 때문에, 더 간단하게 사용할 수 있습니다.

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

// 1. slice 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    reset: (state) => {
      state.value = 0;
    },
  },
});

// 2. action과 reducer export
export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

 

이 코드는 configureStore를 사용하여 스토어를 생성하는 예시입니다. 이 과정에서 Redux DevTools와 미들웨어가 자동으로 포함됩니다.

5. Redux Toolkit을 React 컴포넌트와 연동하기

이제 useSelector와 useDispatch 훅을 사용하여 Redux 상태를 관리하는 방법을 알아보겠습니다.

예시: 카운터 컴포넌트 구현

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

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

export default store;

이 컴포넌트에서는 Redux 상태를 useSelector로 읽고, useDispatch로 액션을 디스패치하여 상태를 업데이트합니다.

6. 주요 개념 정리

• createSlice: 리듀서와 액션을 한꺼번에 정의하는 도구. 보일러플레이트 코드를 크게 줄여줍니다.
• configureStore: 스토어 설정을 쉽게 처리하고, DevTools와 미들웨어를 자동으로 포함.
• Redux 상태 관리: Redux Toolkit을 통해 더 쉽게 상태를 설정하고, React 컴포넌트에서 상태를 관리.

7. 장점과 단점

장점:

• 코드 양이 줄어들고, 보일러플레이트 코드가 거의 없어짐.
• Redux DevTools와 미들웨어가 자동으로 설정됨.
• 액션과 리듀서를 한꺼번에 관리할 수 있어 더 직관적임.

단점:

• 전통적인 Redux 사용법에 익숙하다면, 처음에 다소 낯설게 느껴질 수 있음.
• 복잡한 상태 관리에서는 여전히 명확한 상태 구조 설계가 필요함.

결론

Redux Toolkit은 Redux 사용을 크게 단순화해 주는 강력한 도구입니다. createSlice와 configureStore를 사용하면 복잡한 설정 없이 상태 관리와 액션 정의를 훨씬 쉽게 처리할 수 있습니다. 실제 프로젝트에 Redux를 적용할 때는 Toolkit을 사용하는 것이 훨씬 효율적입니다.