Redux Toolkit

아니.. Redux를 배웠는데 Redux Toolkit은 또 뭐야? 리덕스랑 다른건가? 새로 또 배워야 하는건가? 라고 생각했다면 일단 한숨 돌리자..

---

Redux Toolkit(리덕스 툴킷)?

Redux Toolkit은 Redux의 개념을 기반으로 만들어진 것이며 Redux와 함께 사용할 수 있는 라이브러리로, Redux의 개념과 기능을 보완하고 간편화 시켜놓은 Toolkit, 말그대로 도구 세트라 생각하면 될 것 같다. 

Redux Toolkit이 Redux 안에 포함되어 있는 개념이라 햇갈릴 수 있는데, Redux와 함께 사용할 수 있는 별도의 라이브러리다. 

Redux Toolkit을 사용하면 Redux의 개념과 기능을 간소화하고 추상화하여 코드의 양을 줄이고 가독성을 높이며, Redux의 보일러플레이트 코드를 감소시키는 등의 장점이 있다.

보일러플레이트(boilerplate)란, 어떤 목적을 위해 반복적으로 작성해야 하는 코드를 미리 작성하여 구조화한 것을 말한다. 즉, 어떤 작업을 위해 기본적으로 작성해야 하는 코드, 파일 구조, 디렉토리 구조 등을 미리 작성하여 프로젝트를 시작할 때 템플릿으로 사용하는 것을 말한다.

보일러플레이트는 프로젝트를 시작하는 초기 단계에서 개발자들이 해야 하는 번거로운 작업을 줄이고, 일관된 코드 구조와 코딩 스타일을 유지하며, 프로젝트의 기반을 빠르게 설정할 수 있도록 도와준다. 이를 통해 개발자들은 보일러플레이트에서 제공하는 기본 구조를 기반으로 코드를 작성하여 개발 속도와 효율성을 높일 수 있다.

Redux에서도 보일러플레이트 코드를 작성해야 하는데, Redux Toolkit은 이러한 보일러플레이트 코드를 줄여주는 도구 모음을 제공하여 개발자들이 보일러플레이트 코드 작성에 더 이상 많은 시간을 들이지 않아도 되도록 도와준다.

---

Redux Toolkit  장점

코드량 감소(configureStore: Redux 스토어를 구성할 때 사용하는 헬퍼 함수)
Redux Toolkit은 Redux에 비해 보일러플레이트 코드의 양을 줄일 수 있다. 예를 들어 configureStore 함수를 사용하면 Redux 스토어를 구성하는 데 필요한 많은 코드를 줄일 수 있다.

불변성 업데이트 간소화(createSlice: Redux 상태와 관련된 리듀서와 액션 생성 함수를 한 번에 생성하는 함수)
createSlice 함수를 사용하여 상태 업데이트를 더 쉽게 작성할 수 있다. 이 함수는 상태와 관련된 리듀서와 액션 생성 함수를 한 번에 생성하여, 상태 업데이트 로직을 간소화하고 코드 가독성을 높일 수 있다.

비동기 작업 처리 간소화(createAsyncThunk: 비동기 작업 처리를 위한 액션 생성 함수를 생성하는 함수)
createAsyncThunk 함수를 사용하여 비동기 작업 처리를 간편하게 처리할 수 있다. 이 함수는 비동기 작업 처리를 위한 액션 생성 함수를 생성하여, 액션을 디스패치하는 것만으로도 비동기 작업 처리를 할 수 있다.

엔티티 관리 헬퍼 함수(createEntityAdapter: 엔티티를 관리하기 위한 헬퍼 함수)
createEntityAdapter 함수를 사용하여 엔티티를 관리할 수 있다. 이 함수는 엔티티를 관리하는 데 필요한 일반적인 CRUD 함수를 생성하여, 엔티티 관리 코드를 간소화하고 가독성을 높인다.

즉, 코드량을 줄여서 개발시간을 단축하고 가독성이 좋아져 유지보수가 쉬워진다. 또한 비동기 작업처리와 엔티티관리를 간편하게 할 수 있다

엔티티(개체 Entity) 관리는 데이터베이스에서 개체(Entity)를 정의하고 저장, 검색, 업데이트, 삭제하는 프로세스.
개체(Entity)는 데이터베이스에서 데이터를 구성하는 기본 단위 중 하나다.
엔티티 관리는 데이터베이스의 구조를 설계할 때 중요한 역할을 한다. 데이터베이스 설계자는 엔티티를 식별하고 정의하여 데이터베이스에 저장할 정보를 결정하고 이렇게 정의된 엔티티는 관계형 데이터베이스에서는 테이블(Table)로 구현되고, 테이블 간의 관계를 설정하여 데이터를 구성한다.

엔티티 관리는 데이터베이스의 성능과 유지보수성을 높이기 위해 필수적인 작업이다. 엔티티를 올바르게 정의하고, 데이터를 효율적으로 저장하고 검색할 수 있도록 설계함으로써 데이터베이스의 성능을 최적화하고, 데이터의 일관성과 정확성을 유지할 수 있다.

---

Redux Toolkit 사용해보기

Getting Started | Redux Toolkit

0. 프로젝트에 Redux Toolkit을 설치.(기존 Redux가 설치되어 있어야한다.)

// npm 사용시
npm install @reduxjs/toolkit
// 또는
// yarn 사용시
yarn add @reduxjs/toolkit

혹은 바인딩이 필요한경우

// npm 사용시
npm install react-redux
// 또는
// yarn 사용시
yarn add react-redux

공식 홈페이지에서는 React 및 Redux로 새로운 앱을 시작할 때 아래와 같이 사용을 권장한다.

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

위와같이 설치했다면 이제 Redux Toolkit을 사용하여 상태 관리를 할 수 있다. 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';
import App from './App';

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Provider를 사용하여 Redux store를 전달하고, configureStore 함수를 사용하여 store를 생성한다. 그리고 counterSlice에서 생성된 reducer를 store에 등록해준다.

src/features/counter/counterSlice.js

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

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  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 함수는 Redux state와 reducer를 생성하는 boilerplate 코드를 대신해주는 기능을 한다. 이 함수를 사용하면 reducer를 정의하고 action creators를 생성하는 코드를 간결하게 작성할 수 있다.

createSlice 함수의 인자로 전달된 객체는 slice의 이름, 초기 상태(initial state) 및 reducer 함수들을 정의한다.

reducers 객체는 increment, decrement, incrementByAmount 3개의 reducer 함수를 정의한다. 이들 reducer 함수는 slice의 상태를 변경하는 action을 처리해준다.

마지막으로, createSlice 함수는 actions 객체를 반환한다. 이 객체는 정의한 reducer 함수들에 대응하는 action creator 함수들을 포함한다. 이 예제에서는 increment, decrement, incrementByAmount action creator 함수를 추출하여 내보낸다.

위에서 처럼 Redux Toolkit의 createSlice 함수를 사용하면 Redux state와 reducer를 간편하게 생성할 수 있다.

src/features/counter/Counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

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

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

export default Counter;

Counter 컴포넌트에서는 useSelector hook을 사용하여 Redux store에서 counter 상태 값을 가져오고 useDispatch hook을 사용하여 increment, decrement, incrementByAmount 액션을 디스패치해준다.

src/App.js

import Counter from './features/counter/Counter';

function App() {
  return (
    <div>
      <h1>Counter App</h1>
      <Counter />
    </div>
  );
}

export default App;

App 컴포넌트에서는 Counter 컴포넌트를 렌더링하고, Provider를 사용하여 Redux store를 전달한다.

---

Redux 와 Redux Toolkit 사용 비교

Redux Toolkit을 사용하지 않고 Redux만 사용하여 상태 값을 관리하는 코드를 작성해본다면

Redux만 사용

// 액션 타입 정의
const INCREMENT = 'counter/increment';
const DECREMENT = 'counter/decrement';

// 액션 생성 함수 정의
function increment() {
  return {
    type: INCREMENT
  }
}

function decrement() {
  return {
    type: DECREMENT
  }
}

// 초기 상태 값 정의
const initialState = {
  value: 0
};

// 리듀서 함수 정의
function counterReducer(state = initialState, action) {
  switch(action.type) {
    case INCREMENT:
      return { ...state, value: state.value + 1 };
    case DECREMENT:
      return { ...state, value: state.value - 1 };
    default:
      return state;
  }
}

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

// 상태 값 변경
store.dispatch(increment());
store.dispatch(decrement());

위 코드에서는 Redux를 사용하여 상태 값을 관리하고 있다. 액션 타입, 액션 생성 함수, 초기 상태 값, 리듀서 함수 등을 직접 정의하여 사용하고 있다.

이번에는 Redux Toolkit을 사용하여 같은 상태 값을 관리하는 코드를 작성해보자.

Redux Toolkit을 사용

// Redux Toolkit 라이브러리에서 가져오기
import { createSlice } from '@reduxjs/toolkit';

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

// 리듀서 함수 및 액션 생성 함수 추출
const { actions, reducer } = counterSlice;

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

// 상태 값 변경
store.dispatch(actions.increment());
store.dispatch(actions.decrement());

Redux Toolkit을 사용하여 액션 타입, 액션 생성 함수, 초기 상태 값, 리듀서 함수 등을 자동으로 생성한다. createSlice 함수를 사용하여 slice를 생성하고, 액션 생성 함수 및 리듀서 함수를 가져와서 사용한다.

위 예시처럼 Redux Toolkit은 Redux를 보완하고 간소화하는 도구 모음을 제공하므로, Redux에서 보다 더 쉽게 애플리케이션을 개발할 수 있다.