[Redux] Redux-Toolkit 기초

Jinga·2023년 7월 18일

React

목록 보기

20/28

Redux Toolkit

Redux Toolkit이란

Redux Toolkit은 Redux의 주요 기능을 간소화하고 강화하는 도구 모음이다.
Redux Toolkit은 Redux를 사용하여 상태 관리를 더욱 편리하고 간결하게 할 수 있게 도와주는 공식적인 Redux 라이브러리이다.
Redux의 번거로움과 반복적인 작업을 줄이고 개발 생산성을 향상시키는 목적으로 만들어졌다.

주요 개념과 기능

createSlice: 리듀서와 액션을 한 곳에 정의하는 기능이다. createSlice를 사용하면 보일러플레이트 코드를 줄이고 액션과 리듀서를 간편하게 작성할 수 있다.

configureStore: 스토어를 생성하고 Redux 미들웨어를 설정하는 기능이다. 기본적으로 redux-thunk 미들웨어가 내장되어 있어 비동기 작업을 처리하기 용이하다.

createAsyncThunk: 비동기 작업을 처리하기 위한 편리한 유틸리티 함수이다. 비동기 액션을 생성하고, 액션 생성자 함수를 정의하고, 비동기 작업의 상태에 따라 리듀서를 자동으로 처리할 수 있다.

createEntityAdapter: 정규화된 상태 구조를 처리하는데 유용한 도구이다. 엔티티 객체를 조작하고 정규화된 상태를 생성하는 데 도움을 준다.

Redux Toolkit 사용 이유

간편한 구현: Redux Toolkit은 Redux의 복잡성을 줄여준다. 보일러플레이트 코드를 줄이고 간단하게 상태와 액션을 정의할 수 있다.

개발 생산성 향상: Redux Toolkit은 개발 생산성을 향상시키기 위해 여러 가지 편의 기능을 제공한다. 비동기 작업 처리, 정규화된 상태 관리, 미들웨어 설정 등을 손쉽게 처리할 수 있다.

커뮤니티 지원: Redux Toolkit은 Redux의 공식 라이브러리이며, 큰 커뮤니티와 함께 성장하고 있다. 관련 자료와 지원을 쉽게 찾을 수 있으며, 최신 업데이트와 기능 개선을 받을 수 있다.

Redux Toolkit 사용 사례

Redux Toolkit은 다양한 상황에서 사용될 수 있다. 몇 가지 대표적인 사용 사례는 다음과 같다.

중소 규모 애플리케이션: Redux Toolkit은 작은 규모의 애플리케이션에서 Redux를 간편하게 사용할 수 있도록 도와준다. 초기 설정과 보일러플레이트 코드를 최소화하고, 개발 생산성을 높일 수 있다.

비동기 작업 처리: Redux Toolkit은 비동기 작업을 처리하기 위한 createAsyncThunk 유틸리티 함수를 제공한다. 네트워크 요청, 비동기 데이터 가져오기 등의 작업을 효과적으로 처리할 수 있다.

정규화된 상태 관리: Redux Toolkit은 createEntityAdapter를 통해 정규화된 상태 관리를 지원한다. 관련된 데이터를 효율적으로 구성하고 업데이트할 수 있다.

Redux Toolkit 사용 방법

Redux Toolkit을 사용하려면 다음 단계를 따르면 된다:

Slice 생성: createSlice 함수를 사용하여 액션과 리듀서를 한 번에 생성하는 "slice"를 정의하다. slice에는 이름, 초기 상태, 액션 및 리듀서 함수가 포함됩니다.

스토어 생성: configureStore 함수를 사용하여 스토어를 생성하다. 필요한 경우 미들웨어를 추가하고 리듀서를 설정할 수 있다.

액션 디스패치: useDispatch 훅을 사용하여 액션을 디스패치하고 상태를 업데이트하다.

상태 조회: useSelector 훅을 사용하여 스토어의 상태를 조회하다. 컴포넌트에서 필요한 상태를 선택적으로 가져올 수 있다.

Redux Toolkit 코드 예시

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

// Step 1: Slice 생성
const counterSlice = createSlice({
  name: "counter",
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

// Step 2: 스토어 생성
const store = configureStore({
  reducer: counterSlice.reducer,
});

// Step 3: 액션 디스패치
store.dispatch(counterSlice.actions.increment());
store.dispatch(counterSlice.actions.decrement());

// Step 4: 상태 조회
const counter = store.getState();
console.log(counter); // 현재 카운터의 값 출력

위 예시 코드는 "counter"라는 이름의 슬라이스를 생성하여 카운터 상태와 관련된 액션 및 리듀서를 포함한다. configureStore 함수를 사용하여 스토어를 생성하고, counterSlice.reducer를 리듀서로 설정한다. 그리고 store.dispatch를 사용하여 액션을 디스패치하고 상태를 업데이트하며, store.getState를 사용하여 현재 상태를 조회한다.