[Redux] Redux Toolkit

MinJae·2024년 10월 30일

React

목록 보기

18/21

Redux Toolkit이란 ?

Redux는 리액트 애플리케이션에서 복잡한 상태 관리를 보다 체계적이고 예측 가능하게 해주는 전역 상태 관리 라이브러리입니다. Action, Reducer, Store를 통해 상태를 업데이트하며 상태 변화를 트래킹할 수 있는 구조를 가지고 있습니다. 하지만 Redux를 사용하다 보면 복잡한 설정 과정과 반복되는 코드, 불변성 관리의 어려움 등 여러 단점이 있습니다.

이를 해결하고자 Redux Toolkit이 등장했습니다. Redux Toolkit은 이런 Redux의 단점을 보완해 더 간편하고 효율적인 상태 관리를 제공하는 라이브러리입니다.

Redux Toolkit 사용하기

1. 설치

// npm
npm install @reduxjs/toolkit react-redux

// yarn
yarn add @reduxjs/toolkit react-redux

Redux Toolkit과 react-redux를 설치합니다.

2. Slice 생성하기 (counterSlice)

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

const counterSlice = createSlice({
  name: "counterSlice",
  initialState: { value: 0 },
  reducers: {
    up: (state, action) => {
      state.value = state.value + action.payload;
    },
    down: (state, action) => {
      state.value = state.value - action.payload;
    },
  },
});

export const { up, down } = counterSlice.actions;
export default counterSlice.reducer;

createSlice를 사용하면 하나의 상태와 그 상태를 업데이트하는 액션들을 한 번에 정의할 수 있습니다. createSlice는 상태 관리에 필요한 모든 것을 포함하는 Slice를 생성합니다.

createSlice의 역할:

initialState: 슬라이스의 초기 상태를 정의합니다.
reducers: 상태를 업데이트하는 함수들을 정의합니다.
actions: 각 리듀서 함수와 연관된 액션 생성자가 자동으로 생성되므로 직접 정의할 필요가 없습니다.

3. Store 구성하기 (configureStore)

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

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

export default store;

configureStore는 Redux의 중앙 저장소를 생성하며, 여러 슬라이스의 리듀서를 통합하여 애플리케이션의 전역 상태를 관리합니다.

configureStore의 역할:

reducer: 여러 슬라이스 리듀서를 통합하여 하나의 루트 리듀서를 구성합니다.
middleware: 기본적으로 Redux의 미들웨어와 함께 Redux Thunk가 내장되어 있어 비동기 처리를 쉽게 수행할 수 있습니다.

4. 컴포넌트에서 사용하기

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Redux 상태와 액션을 컴포넌트에서 사용하려면 useDispatch와 useSelector 훅을 사용합니다.

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

  const handleCounterDown = () => {
    dispatch(down(1));
  };

  const handleCounterUp = () => {
    dispatch(up(1));
  };

  return (
    <div>
      <button onClick={handleCounterDown}>-</button>
      {count}
      <button onClick={handleCounterUp}>+</button>
    </div>
  );
};