리덕스와 리덕스 툴킷(createSlice, handleActions)

사용해야 하는 도구나 함수의 선택은 개인적인 취향, 프로젝트의 규모, 팀의 선호도 등 여러 요소에 따라 다를 수 있다. 그러나 Redux Toolkit은 Redux 코드를 작성하는 데 있어서 편의성과 효율성을 제공하므로, 많은 프로젝트에서는 Redux Toolkit을 선호하는 경향이 있다.

여기 몇 가지 고려해야 할 사항이 있다:

• 프로젝트 규모와 복잡도: 작은 규모의 프로젝트에서는 Redux Toolkit의 편의성이 더 큰 장점이 될 수 있다. 큰 규모의 복잡한 애플리케이션의 경우에는 더 많은 커스터마이징이 필요할 수 있으므로 해당 요구에 맞게 Redux의 기본 기능을 직접 사용할 수도 있다.

• Redux Toolkit의 특징 활용: Redux Toolkit은 createSlice, configureStore 등의 특별한 기능을 제공한다. 이러한 기능들이 프로젝트의 필요에 부합한다면 Redux Toolkit을 사용하는 것이 유리할 수 있다.

• 팀의 선호도: 팀의 개발자들이 이미 Redux Toolkit에 익숙하거나, 해당 도구를 선호하는 경우에는 Redux Toolkit을 사용하는 것이 팀의 일관성을 유지하고 코드의 가독성을 향상시킬 수 있다.

Redux Toolkit은 Redux를 사용할 때 생기는 일반적인 패턴들을 단순화하고 코드를 축소하는 데 도움이 되므로, 새로운 프로젝트에서는 Redux Toolkit을 사용하는 것이 좋을 수 있다. 그러나 이미 기존 프로젝트가 일반적인 Redux 코드로 구성되어 있다면 그에 따라서 기존 코드를 유지하는 것이나, 필요한 경우에 Redux Toolkit으로 마이그레이션하는 것도 가능하다.

기본 Redux 코드로 상태 관리하는 순서

1. 액션(Action) 정의

액션은 상태 변화를 일으키는 객체다. 일반적으로 type 프로퍼티를 가져야 한다.

// action-types.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

2. 액션 생성자(Action Creator) 작성

액션 생성자는 액션을 반환하는 함수다.

// actions.js
import { INCREMENT, DECREMENT } from './action-types';

export const increment = () => ({
  type: INCREMENT,
});

export const decrement = () => ({
  type: DECREMENT,
});

3. 리듀서(Reducer) 작성

리듀서는 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수다.

// reducer.js
import { INCREMENT, DECREMENT } from './action-types';

const initialState = 0;

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

export default counterReducer;

4. 스토어(Store) 생성

리듀서를 사용하여 Redux 스토어를 생성한다.

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Redux Toolkit으로 상태 관리하는 순서:

1. Slice 생성

createSlice 함수를 사용하여 슬라이스를 생성한다. 슬라이스는 액션 및 리듀서를 포함하는 일종의 모듈이다.

// slice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

2. 스토어(Store) 생성

configureStore 함수를 사용하여 Redux 스토어를 생성한다. 이 함수는 Redux Toolkit이 제공하는 기능을 사용하여 스토어를 구성한다.

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice';

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

export default store;

결론

Redux Toolkit은 코드의 양을 줄이고 개발자 경험을 향상시키는 많은 편의 기능을 제공한다.
따라서 가능하면 Redux Toolkit을 사용하는 것이 좋다.