15 Redux와 상태 관리: Redux의 기본 개념과 Redux Toolkit을 활용한 상태 관리

 React 애플리케이션에서 상태 관리(State Management)는 매우 중요한 부분입니다. 여러 컴포넌트 간의 상태를 일관되게 관리하고 공유하기 위해, Redux라는 상태 관리 라이브러리가 널리 사용됩니다. 이번 글에서는 Redux의 기본 개념과 함께 Redux Toolkit을 사용하여 상태 관리하는 방법에 대해 알아보겠습니다. Redux와 Redux Toolkit을 통해 상태 관리가 어떻게 효율적으로 이루어지는지 이해할 수 있습니다.

1. Redux의 기본 개념

Redux는 애플리케이션의 상태를 중앙에서 관리하는 라이브러리입니다. 기본적으로 **단일 스토어(Store)**를 통해 애플리케이션의 상태를 관리하며, **액션(Action)**과 **리듀서(Reducer)**를 이용해 상태를 변경합니다. Redux는 상태 변화의 흐름을 예측 가능하게 만들어주고, 복잡한 애플리케이션에서 일관된 상태 관리를 가능하게 합니다.

a. Redux의 핵심 원칙

Redux는 다음과 같은 세 가지 원칙을 따릅니다.

1. 단일 데이터 저장소(Single Source of Truth)
   애플리케이션의 모든 상태는 단 하나의 스토어에 저장됩니다. 이를 통해 상태가 중앙에서 관리되고, 언제든지 애플리케이션의 상태를 쉽게 추적할 수 있습니다.

2. 상태는 읽기 전용(Read-Only State)
   상태는 직접 수정할 수 없고, 오직 **액션(Action)**을 통해서만 상태를 변경할 수 있습니다. 이렇게 함으로써 상태 변경의 흐름을 명확히 할 수 있습니다.

3. 변경은 순수 함수(Pure Function)로만 처리(Pure Function for Changes)
   상태를 변경하는 로직은 순수 함수인 **리듀서(Reducer)**에서 처리됩니다. 리듀서는 상태를 변화시키지 않고 새로운 상태를 반환합니다.

b. 기본적인 Redux 코드 구조

Redux를 사용한 애플리케이션은 보통 다음과 같은 구조를 가집니다.

1. 액션(Action): 상태 변경을 일으킬 수 있는 이벤트를 정의합니다.
2. 리듀서(Reducer): 액션을 처리하여 새로운 상태를 반환하는 함수입니다.
3. 스토어(Store): 애플리케이션의 전체 상태를 저장하는 객체입니다.

// 액션 정의
const increment = () => ({
  type: 'INCREMENT'
});

// 리듀서 정의
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

// 스토어 생성
import { createStore } from 'redux';
const store = createStore(counterReducer);

// 상태 구독
store.subscribe(() => console.log(store.getState()));

// 액션 디스패치
store.dispatch(increment()); // 출력: 1

위 코드는 매우 간단한 Redux의 구현 예시입니다. INCREMENT 액션을 디스패치하면, 상태가 증가하는 방식입니다.

2. Redux Toolkit을 활용한 상태 관리

Redux Toolkit은 Redux의 공식 도구로, Redux를 더 쉽게 사용할 수 있도록 도와줍니다. Redux Toolkit은 Redux의 보일러플레이트 코드(반복적인 코드)를 줄여주고, 상태 관리의 복잡성을 낮춰줍니다. Redux Toolkit을 사용하면 더욱 간단하고 직관적으로 상태를 관리할 수 있습니다.

a. Redux Toolkit 사용하기

Redux Toolkit을 사용하기 위해서는 먼저 @reduxjs/toolkit 패키지를 설치해야 합니다. 아래는 설치 명령어입니다.

npm install @reduxjs/toolkit react-redux

b. Redux Toolkit의 주요 함수

1. configureStore: 스토어를 설정하는 함수입니다.
2. createSlice: 상태와 액션을 함께 정의하는 함수입니다.
3. createAsyncThunk: 비동기 작업을 처리할 때 사용하는 함수입니다.

c. Redux Toolkit으로 상태 관리하기

이제 Redux Toolkit을 사용하여 상태를 관리하는 예시를 살펴보겠습니다.

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

// Slice 정의: 상태와 액션을 한 곳에서 관리
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1
  }
});

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

// 액션
const { increment, decrement } = counterSlice.actions;

// 상태 구독
store.subscribe(() => console.log(store.getState()));

// 액션 디스패치
store.dispatch(increment()); // 출력: 1
store.dispatch(decrement()); // 출력: 0

위 코드에서는 createSlice를 사용하여 increment와 decrement라는 두 가지 액션을 정의하고, 이를 통해 상태를 간편하게 변경할 수 있습니다. configureStore를 사용하여 스토어를 생성하고, 상태를 추적할 수 있습니다.

d. 비동기 작업 처리하기

Redux Toolkit에서는 비동기 작업을 쉽게 처리할 수 있도록 createAsyncThunk를 제공합니다. 예를 들어, API 호출을 통해 데이터를 가져오는 비동기 작업을 처리할 수 있습니다.

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

// 비동기 작업 정의
export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  return response.json();
});

// Slice 정의
const userSlice = createSlice({
  name: 'user',
  initialState: { user: {}, status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = 'failed';
      });
  }
});

// 스토어 생성
const store = configureStore({
  reducer: {
    user: userSlice.reducer
  }
});

// 액션 디스패치
store.dispatch(fetchUser(1));

위 예시에서는 createAsyncThunk를 사용하여 사용자 정보를 API에서 가져오는 비동기 작업을 정의했습니다. extraReducers를 통해 비동기 작업의 상태를 추적하고, 결과에 따라 상태를 업데이트합니다.

3. Redux와 Redux Toolkit의 차이점

• Redux: 기본적인 상태 관리 기능을 제공하지만, 설정이나 액션, 리듀서 코드가 다소 복잡하고 반복적입니다.
• Redux Toolkit: Redux의 보일러플레이트 코드를 줄여주고, 상태 관리 로직을 더 간편하게 처리할 수 있도록 도와주는 도구입니다. 특히, createSlice, configureStore, createAsyncThunk와 같은 기능을 통해 코드가 간결하고 직관적입니다.

4. 결론

Redux와 Redux Toolkit은 React 애플리케이션에서 상태를 관리하는 매우 강력한 도구입니다. Redux는 중앙집중식 상태 관리로 애플리케이션의 상태를 일관되게 유지할 수 있게 도와주며, Redux Toolkit을 사용하면 복잡한 설정과 보일러플레이트 코드를 줄여 코드의 가독성과 유지보수성을 높일 수 있습니다.

초기에는 조금 복잡하게 느껴질 수 있지만, Redux와 Redux Toolkit을 활용하면 점차적으로 상태 관리의 효율성을 경험할 수 있습니다. 상태 관리가 필요한 React 애플리케이션에서 Redux와 Redux Toolkit을 적극적으로 사용해보세요.