Redux Toolkit 강좌(2강): 복잡성 해결

초기 설정의 복잡성 해결

Redux를 처음 사용할 때 많은 개발자들이 느끼는 문제 중 하나는 복잡한 초기 설정입니다. 스토어 설정, 리듀서 작성, 액션 생성 등 다양한 설정을 위해 여러 파일을 만들어야 하고, 각각의 설정 과정을 직접 처리해야 하기 때문에 진입 장벽이 높게 느껴질 수 있습니다. 이번 강의에서는 이러한 초기 설정의 복잡성을 Redux Toolkit을 사용하여 간단히 해결하는 방법을 배워보겠습니다.

초기 설정의 복잡성 해결

기존 Redux의 설정 과정

기존 Redux를 사용할 때는 다음과 같은 단계가 필요합니다:

• 스토어 설정: createStore와 미들웨어를 사용해 스토어를 생성합니다.
• 리듀서 작성: 각 상태에 대한 리듀서를 작성하고, 이들을 하나로 합치는 작업이 필요합니다.
• 액션 생성: 상태를 변경하기 위해 액션 타입과 액션 생성 함수를 정의합니다.
• 상태 관리 연결: React 컴포넌트에서 Redux의 상태를 사용하려면 Provider로 컴포넌트를 감싸고, connect 함수를 사용해 상태와 액션을 연결합니다.

이 과정은 파일이 많아지고 코드의 중복이 발생할 가능성이 큽니다. 이러한 복잡성을 해결하기 위해 Redux Toolkit이 등장했습니다.

Redux Toolkit을 사용한 설정 간소화

Redux Toolkit은 이러한 초기 설정을 간소화하기 위해 다양한 도구를 제공합니다. 특히, configureStore와 createSlice를 사용하면 복잡한 설정 과정을 대폭 줄일 수 있습니다.

• configureStore: 스토어 설정을 간소화하고, 미들웨어 및 개발자 도구 설정을 자동으로 처리합니다.
• createSlice: 리듀서와 액션을 하나의 파일에서 정의할 수 있어 코드의 양을 줄이고 유지보수를 쉽게 만듭니다.

실습: 카운터 앱 예제

이제 Redux Toolkit을 사용해 간단한 카운터 앱을 만들어 보겠습니다. 이 예제를 통해 초기 설정이 얼마나 간단해졌는지 직접 체험해 보세요.

1. createSlice로 리듀서 및 액션 설정하기

먼저, createSlice를 사용하여 리듀서와 액션을 정의합니다.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

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

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

2. configureStore로 스토어 설정하기

이제 configureStore를 사용하여 스토어를 설정해 보겠습니다.

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

configureStore는 기본적인 스토어 설정을 자동으로 처리해주므로, 설정 과정이 훨씬 간단해집니다.

3. useSelector와 useDispatch로 상태 관리하기

React 컴포넌트에서 상태를 조회하고 액션을 디스패치하려면 useSelector와 useDispatch를 사용합니다.

// src/components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '../features/counter/counterSlice';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>
    </div>
  );
}

export default Counter;

useSelector를 사용해 상태를 조회하고, useDispatch를 통해 액션을 디스패치할 수 있습니다. 이를 통해 React 컴포넌트에서 Redux 상태를 손쉽게 관리할 수 있습니다.

// src/App.js
import React from 'react';
import Counter from './components/Counter';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter />
      </header>
    </div>
  );
}

export default App;

Counter 실행화면

핵심 학습 내용

이번 강의를 통해 Redux Toolkit의 createSlice와 configureStore를 사용하여 초기 설정의 복잡성을 어떻게 해결할 수 있는지 알아보았습니다. Redux Toolkit을 사용하면 설정 과정이 단순해지고, 코드의 가독성과 유지보수성이 크게 향상됩니다. 다음 강의에서는 Redux Toolkit을 활용해 성능 최적화를 이루는 방법에 대해 알아보겠습니다.