[김민태의 데브캠프] Redux & Redux Toolkit

vgotu99·2024년 11월 22일

Redux 와 Redux Toolkit의 차이점

Redux와 Redux Toolkit은 대표적인 상태 관리 라이브러리 중 하나다.
Redux는 상태 관리의 기본적인 원칙과 기능을 제공하며, Redux Toolkit은 Redux 사용을 더 쉽고 간결하게 만들어준다.

주요 차이점

설치와 사용 용이성
- Redux는 boilerplate 코드가 많아 설정과 사용이 다소 복잡할 수 있다.
- Redux Toolkit은 기본적인 Redux 설정을 간소화하고, 더 나은 개발자 경험을 제공한다.
기본 제공 기능
- Redux는 상태 관리만 제공한다.
- Redux Toolkit은 createSlice, createAsyncThunk 같은 유틸리티와 함께 미들웨어 설정 및 개발 환경에서 디버깅 도구 통합을 제공한다.
구조
- Redux는 액션 생성자, 리듀서, 스토어 등을 별도로 정의해야 한다.
  Redux Toolkit은 이러한 구성 요소를 통합하고, 코드 중복을 줄이도록 설계되었다.

Redux

Redux는 JavaScript 애플리케이션의 상태를 중앙에서 관리하는 라이브러리로, 주로 React와 함께 사용된다. 상태의 일관성을 유지하고 복잡한 상태 전이를 관리하기에 적합하다.

주요 개념

스토어(Store): 애플리케이션의 전역 상태를 보관한다.
액션(Action): 상태를 변경하기 위한 순수한 객체로 type 필드를 반드시 포함해야한다.
리듀서(Reducer): 현재 상태와 액션을 입력받아 새로운 상태를 반환하는 순수 함수이다.

Redux를 이용한 상태 변경

액션 생성
- 상태를 변경하기 위한 액션 객체를 정의한다.
리듀서 생성
- 상태와 액션을 기반으로 새 상태를 반환하는 리듀서를 생성한다.
스토어 생성
- 리듀서를 전달하여 Redux 스토어를 생성한다.
디스패치
- 액션을 스토어에 디스패치하여 상태를 변경한다.
- 액션을 인자로 디스패치 호출 시 리듀서를 호출하게 되며 리듀서의 반환 값으로 스토어의 값(상태)을 수정한다.

import { createStore } from 'redux';

// 초기 상태 정의
const initialState = {
  count: 0,
};

// 액션 생성자
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// 리듀서
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;
  }
};

// 스토어 생성
const store = createStore(counterReducer);

// 구독
store.subscribe(() => console.log(store.getState()));

// 상태 변경
store.dispatch(increment()); // count: 1
store.dispatch(decrement()); // count: 0

추가 개념

미들웨어
- Redux는 미들웨어를 통해 비동기 작업(API 호출)을 처리할 수 있다. 대표적으로 redux-thunk, redux-saga 등이 있다.
React와의 통합
- react-redux 라이브러리를 사용하여 React 컴포넌트와 Redux를 연결할 수 있다.
Immutable 상태
- Redux 상태는 불변성을 유지해야 하며, 이를 위해 immer 같은 라이브러리를 사용할 수 있다.

Redux Toolkit

Redux Toolkit은 Redux가 제공하는 공식 유틸리티 라이브러리로, Redux를 더 간편하게 설정하고 사용할 수 있도록 도와준다.

주요 개념

createSlice로 액션과 리듀서를 통합하여 작성할 수 있다.
createAsyncThunk로 비동기 작업을 간소화할 수 있다.
내장된 DevTools 및 미들웨어 설정을 제공한다.
상태 관리 관련 boilerplate코드를 줄일 수 있다.

Redux Toolkit을 이용한 상태 변경

Slice 생성
- 상태, 리듀서, 액션을 한 번에 정의한다.
스토어 생성
- configureStore를 사용하여 스토어를 생성한다.
디스패치
- 액션을 디스패치하여 상태를 변경한다.

import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Slice 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => {
      state.count += 1; // Immer를 사용하여 불변성 자동 관리
    },
    decrement: (state) => {
      state.count -= 1;
    },
  },
});

// 액션과 리듀서 추출
const { increment, decrement } = counterSlice.actions;
const counterReducer = counterSlice.reducer;

// 스토어 생성
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// 컴포넌트
const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
};

// 앱
const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

export default App;