고급 상태 관리 Redux 사용하기, Redux Toolkit을 활용한 효율적인 코드 작성

현대 웹 애플리케이션에서 상태 관리는 필수적인 요소입니다. 특히 대규모 애플리케이션에서는 상태 관리 라이브러리를 사용하지 않으면 복잡한 상태를 일관되게 유지하기 어려워집니다. Redux는 이러한 문제를 해결하기 위해 널리 사용되는 상태 관리 라이브러리 중 하나입니다. 이번 글에서는 Redux의 기본 개념과 Redux Toolkit을 사용해 효율적으로 상태 관리 코드를 작성하는 방법에 대해 설명하겠습니다.

1. Redux란 무엇인가?

Redux는 JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 라이브러리입니다. Redux의 핵심 아이디어는 애플리케이션의 전체 상태를 중앙 집중식 저장소(Store)에 보관하고, 상태를 변경하는 모든 작업은 Action을 통해서만 이루어진다는 것입니다. Redux는 다음과 같은 세 가지 기본 원칙을 따릅니다:

  • 단일 진실의 원천(Single Source of Truth): 애플리케이션의 상태는 오직 하나의 스토어에만 존재합니다.
  • 상태는 읽기 전용(Read-Only): 상태는 직접 수정할 수 없으며, 상태 변경을 위해서는 액션을 발행해야 합니다.
  • 변경은 순수 함수(Pure Functions)를 통해 이루어짐: 상태 변경은 리듀서라는 순수 함수를 사용하여 수행됩니다.

2. Redux의 핵심 개념

2.1 Store

Store는 애플리케이션의 상태를 저장하는 객체입니다. Store는 상태를 조회하거나, 액션을 디스패치하고, 리스너를 등록하여 상태 변경을 알림 받을 수 있는 메서드를 제공합니다.

2.2 Action

Action은 상태 변화의 의도를 나타내는 객체입니다. Action 객체는 ‘type’ 속성과 (필요시) ‘payload’를 포함하여 만들어집니다. 예를 들어, 사용자 정보를 업데이트 하는 액션은 다음과 같을 수 있습니다:

const updateUserAction = {
        type: 'UPDATE_USER',
        payload: { name: 'John', age: 30 },
    };

2.3 Reducer

Reducer는 action의 type에 따라 새로운 상태를 반환하는 순수 함수입니다. 상태를 어떻게 변경할지를 결정합니다. 아래는 사용자 정보를 관리하는 간단한 리듀서입니다:

const userReducer = (state = { name: '', age: 0 }, action) => {
        switch (action.type) {
            case 'UPDATE_USER':
                return {
                    ...state,
                    ...action.payload,
                };
            default:
                return state;
        }
    };

3. Redux Toolkit 소개

Redux Toolkit은 Redux 애플리케이션을 더 쉽게 설정하고 작성할 수 있도록 돕기 위해 만들어진 공식 툴킷입니다. Redux Toolkit을 사용하면 보일러플레이트 코드를 줄이고, 더 직관적인 API를 사용할 수 있습니다. Redux Toolkit을 사용하면 다음과 같은 작업을 쉽게 수행할 수 있습니다:

  • 상태, 리듀서, 액션을 간단하게 정의할 수 있는 createSlice를 제공
  • 비동기 로직을 처리하기 위한 createAsyncThunk를 제공
  • 스프레드 연산자를 사용하여 상태를 업데이트 할 필요 없이 전체 상태를 쉽게 관리 할 수 있는 configureStore를 제공

4. Redux Toolkit 설정하기

Redux Toolkit을 사용하여 React 애플리케이션에 Redux를 설정하는 방법을 살펴보겠습니다. 아래 단계에 따라 진행합니다:

4.1 의존성 설치

우선, Redux Toolkit과 React-Redux를 설치해야 합니다:

npm install @reduxjs/toolkit react-redux

4.2 Slice 생성하기

다음으로, createSlice를 사용하여 slice를 생성합니다. 아래 예시는 ‘user’ slice를 생성하는 방법입니다:

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

const userSlice = createSlice({
    name: 'user',
    initialState: { name: '', age: 0 },
    reducers: {
        updateUser: (state, action) => {
            state.name = action.payload.name;
            state.age = action.payload.age;
        },
    },
});

export const { updateUser } = userSlice.actions;
export default userSlice.reducer;

4.3 Store 설정하기

Slice를 생성한 후, 이를 포함하는 store를 설정합니다:

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

const store = configureStore({
    reducer: {
        user: userReducer,
    },
});

export default store;

5. React 컴포넌트와 Redux 연결하기

Redux store를 React 컴포넌트와 연결하기 위해 Provider를 사용합니다. 다음 예제는 Redux 상태를 사용하여 사용자 정보를 표시하는 방법을 보여줍니다:

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store, { updateUser } from './store';

const UserComponent = () => {
    const user = useSelector((state) => state.user);
    const dispatch = useDispatch();

    const handleChangeUser = () => {
        dispatch(updateUser({ name: 'Jane', age: 25 }));
    };

    return (
        

User Info:

Name: {user.name}

Age: {user.age}

); }; const App = () => ( ); export default App;

6. 비동기 작업 처리하기

Redux Toolkit의 createAsyncThunk를 사용하여 비동기 작업을 처리할 수 있습니다. 아래 예제는 데이터를 비동기적으로 가져오는 예제입니다:

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

export const fetchUserData = createAsyncThunk('user/fetchUserData', async () => {
    const response = await fetch('https://api.example.com/user');
    return response.json();
});

const userSlice = createSlice({
    name: 'user',
    initialState: { name: '', age: 0, loading: false },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchUserData.pending, (state) => {
                state.loading = true;
            })
            .addCase(fetchUserData.fulfilled, (state, action) => {
                state.loading = false;
                state.name = action.payload.name;
                state.age = action.payload.age;
            });
    },
});

export default userSlice.reducer;

7. Redux DevTools

Redux DevTools는 애플리케이션의 상태 변경을 추적하고 디버깅하는 데 유용한 도구입니다. Redux Toolkit을 사용할 때 DevTools를 쉽게 설정할 수 있습니다:

const store = configureStore({
    reducer: {
        user: userReducer,
    },
    // Enable Redux DevTools just by adding this line
    devTools: process.env.NODE_ENV !== 'production',
});

8. 결론

Redux와 Redux Toolkit을 사용하면 복잡한 상태 관리를 보다 유연하게 처리할 수 있으며, 명확하고 효율적인 코드를 작성할 수 있습니다. 특히, Redux Toolkit의 도구들을 활용하면 보일러플레이트 코드를 줄이고, 코드 유지보수가 쉬워집니다. 이러한 도구들을 활용해 보며 더 나은 React 애플리케이션을 만들어 보십시오.