[React Native] Redux-Toolkit이란? (feat. 기존 Redux와 비교)

안녕하세요. Foma 입니다!

 

저번 글에서 Redux가 무엇이고 어떻게 사용하는지에 대해 다뤘었는데요.

 

(아직 안 보신 분들은 여기 에서 보시면 됩니다!)

 

Redux에 대해 찾아보니 Redux를 사용하기 쉽고 효율적인 Redux-Toolkit이 있더라구요.

 

그래서 오늘은 Redux-Toolkit이 무엇이고 왜 더 사용하기 쉽고 효율적인지에 대해 정리해 보려고 합니다.

 

바로 시작할게요~

---

Redux-Toolkit이란?

 

Redux-Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷입니다.

 

Redux 작성하는 코드를 간단하게 작성할 수 있고, Redux 보다 훨씬 효율적이므로 사용을 공식적으로 강력히 권장합니다.

 

그렇다면 어떤 면에서 더 효율적이라는 것 일까요?

 

기존의 Redux에선 아래와 같은 3가지 문제점이 있었습니다.

 

• Redux 스토어 구성이 너무 복잡하다.
• Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다.
• Redux에는 너무 많은 상용구 코드가 필요하다.

위 문제점을 Redux-Toolkit을 사용하면 해결할 수 있는 것이죠.

 

Redux를 사용하기 위해 Redux-Toolkit을 사용해야 하는 것은 아니지만, 모든 Redux앱엔 Redux-Toolkit을 사용하는 것이 좋다고 말합니다.

 

새로운 Redux 사용자이든 기존 애플리케이션을 단순화하려는 숙련된 사용자이든 Redux-Toolkit을 사용하면 코드가 더 개선되고 유지 관리가 쉬워 진다고 말합니다.

---

Redux-Toolkit이 제공하는 것

 

configureStore

 

간단하게 Store를 만들 수 있도록 도와줍니다,

 

createReducer

 

switch문을 작성하는 것 대신 간단하게 Reducer를 만들 수 있도록 도와줍니다.

 

createAction

 

Reducer에 작성한 것들을 기반으로 Action들을 만들어 줍니다.

 

createSlice

 

reducer의 이름, 초기상태, reducers 등을 간편하게 만들 수 있도록 도와줍니다.

 

createAsyncThunk

 

createAction을 비동기로 만들 수 있도록 도와줍니다.

 

createSelector

 

Store에서 상태를 효율적으로 저장하도록 돠웁니다.

---

기존 Redux와 비교

 

위에서 제공하는 모든 기능을 사용하진 못했지만 기존 Redux와 Redux-Toolkit을 이용하여 Counter앱과 Todo앱을 만들어 보았는데요.

 

간단한 앱을 만드는 데도 Redux-Toolkit이 간편하다는 것을 느낄 수 있었습니다.

 

1. Store

 

기존 Redux는 store를 생성할 때 아래와 같이 진행됩니다.

 

Reducer를 생성하고 combineReducers로 여러 Reducer를 합쳐준 뒤 rootReducer를 만들고 RootState 인터페이스를 따로 만들어 줘야 했습니다.

 

export const rootReducer = combineReducers({
  counter: counterReducer,
  todoList: todoReducer,
});

export interface RootState {
  counter: Counter;
  todoList: TodoState;
}

 

그 다음 createStore로 만들어 줘야 했습니다.

 

const store = createStore(rootReducer);

 

Redux-Toolkit을 사용하면 아래와 같이 진행됩니다.

 

configureStore로 여러 reducer를 담아 만들어 주고,

 

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

 

State 또한 store.getState를 통해 간단하게 가져올 수 있습니다.

 

export type RootState = ReturnType<typeof store.getState>;

 

2. Action

 

기존 Redux는 발생할 Action과 ActionType 등을 직접 만들어 줘야 했습니다.

 

export enum TodoActionType {
  tapAdd,
  tapDelete,
  tapUpdate,
  modalOpen,
  modalClose,
}

export type TodoPayload = {
  todo: Todo;
  selectedIndex: number;
};

export type TodoAction = {
  type: TodoActionType;
  payload: TodoPayload;
};

 

Redux-Toolkit에선 createSlice에서 만든 것을 바탕으로 action을 추출해 낼 수 있기 때문에 직접 만들 필요가 없습니다.

 

3. Reducer

 

기존 Redux는 직접 Reducer를 만들어 initialState 등과 switch문으로 action의 타입에 따라 나눠줘야 했고 기존 state에 바뀐점들을 적용해야 했습니다.

 

const todoReducer = (
  state: TodoState = initialState,
  action: TodoAction,
): TodoState => {
  let newTodos = state.todos;
  switch (action.type) {
    case TodoActionType.tapAdd:
      newTodos.push(action.payload.todo);
      return {
        ...state,
        todos: newTodos,
        isModalVisible: false,
      };
    case TodoActionType.tapDelete:
      newTodos.splice(action.payload.selectedIndex, 1);
      return {
        ...state,
        todos: newTodos,
      };
    case TodoActionType.tapUpdate:
      newTodos[action.payload.selectedIndex] = action.payload.todo;
      return {
        ...state,
        todos: newTodos,
        selectedIndex: action.payload.selectedIndex,
        isModalVisible: false,
      };
    case TodoActionType.modalClose:
      return {
        ...state,
        isModalVisible: false,
        selectedIndex: -1,
      };
    case TodoActionType.modalOpen:
      return {
        ...state,
        isModalVisible: true,
        selectedIndex: action.payload.selectedIndex,
      };
    default:
      return state;
  }
};

 

Redux-Toolkit을 사용하면 createSlice로 각 Action에 따른 reducer를 작성해 주면 됩니다.

 

export const todoSlice = createSlice({
  name: 'todoList',
  initialState,
  reducers: {
    add: (state, action: PayloadAction<TodoPayload>) => {
      let newTodos = state.todos;
      newTodos.push(action.payload.todo!);
      state.todos = newTodos;
      state.isModalVisible = false;
    },
    delete: (state, action: PayloadAction<TodoPayload>) => {
      let newTodos = state.todos;
      newTodos.splice(action.payload.selectedIndex!, 1);
      state.todos = newTodos;
    },
    edit: (state, action: PayloadAction<TodoPayload>) => {
      state.todos[action.payload.selectedIndex!] = action.payload.todo!;
      state.isModalVisible = false;
    },
    modalOpen: (state, action: PayloadAction<TodoPayload>) => {
      state.isModalVisible = true;
      state.selectedIndex = action.payload.selectedIndex!;
    },
    modalClose: state => {
      state.isModalVisible = false;
      state.selectedIndex = -1;
    },
  },
});

 

4. Dispatch

 

기존 Redux는 액션을 Reducer에 전달하기 위해 act라는 함수를 만들고

 

  const act = (type: TodoActionType, selectedIndex: number) => {
    const payload: TodoPayload = {
      todo: todoState.todos[selectedIndex],
      selectedIndex: selectedIndex,
    };
    const action: TodoAction = {
      type: type,
      payload: payload,
    };
    dispatch(action);
  };

 

액션타입을 입력해 줘야 했습니다.

 

act(TodoActionType.modalOpen, -1)

 

Redux-Toolkit을 이용하면 Slice에서 actions를 추출해 낸 뒤,

 

  const actions = todoSlice.actions;

 

아래와 같이 액션의 종류를 전달하면 됐습니다.

 

  const payload: TodoPayload = {todo: null, selectedIndex: -1};
  dispatch(actions.modalOpen(payload)

---

Source Code

 

아래로 Repository로 이동하셔서 Redux와 Redux-Toolkit의 Counter앱과 Todo앱을 비교할 수 있습니다.

 

GitHub - fomagran/ReduxTSPractice

---

느낀 점

 

아직 모든 기능을 다뤄본 건 아니지만 실제로 편리하고 코드 양이 줄어드는 것을 느끼게 되었다.

 

Redux에서 아주 강력하게 사용을 추천하니 안 쓸 이유가 없다고 생각해서 앞으로는 Redux를 사용할 때 Redux-Toolkit을 이용해 개발해야겠다.

---

Reference

 

Redux Toolkit: Overview | Redux