[30] React와 Redux를 활용한 비동기 작업 관리

React와 Redux를 활용한 비동기 작업 관리는 Redux Toolkit과 함께 사용하면 더욱 간편해집니다.
비동기 작업 관리의 핵심은 데이터를 비동기적으로 가져오는 작업(API 호출 등)을 관리하고, 이를 Redux 상태로 통합하여 React 컴포넌트에 전달하는 것입니다.

 

1. 비동기 작업 관리의 기본 원리

React와 Redux에서 비동기 작업이 필요한 이유

1. 외부 API 호출: REST API나 GraphQL을 통해 데이터를 가져오거나 전송할 때
2. 데이터 상태 관리: 로딩 상태, 성공 여부, 에러 상태를 Redux 상태로 관리
3. 컴포넌트 간 상태 공유: 비동기 데이터를 여러 컴포넌트에서 재사용

 

Redux에서 비동기 작업의 문제

Redux 자체는 동기 상태 관리를 위한 도구이므로, 비동기 작업을 직접적으로 처리하지 않습니다.
대신, 미들웨어를 활용하여 비동기 작업을 처리하고 상태를 업데이트합니다.

---

2. Redux Toolkit을 사용한 비동기 작업 관리

Redux Toolkit의 장점

1. createAsyncThunk: 비동기 작업을 간편하게 정의
2. extraReducers: 비동기 작업 상태(pending, fulfilled, rejected)를 처리
3. 코드 간소화: 기존 Redux 설정보다 코드 작성량이 적고 직관적

 

---

3. 비동기 작업 구현 단계

1) Redux Toolkit 설치

npm install @reduxjs/toolkit react-redux

 

2) API 호출 함수 작성

먼저, 데이터를 가져오는 API 호출 함수를 작성합니다.

// src/service/api.js
export const fetchDataFromApi = async (param) => {
    const response = await fetch(`https://api.example.com/data?param=${param}`);
    if (!response.ok) {
        throw new Error("Failed to fetch data");
    }
    return await response.json();
};

 

3) createAsyncThunk로 비동기 작업 정의

createAsyncThunk를 사용해 비동기 작업을 생성합니다.

import { createAsyncThunk } from "@reduxjs/toolkit";
import { fetchDataFromApi } from "../service/api";

// 비동기 작업 정의
export const fetchData = createAsyncThunk(
    "data/fetchData", // 액션 타입
    async (param, { rejectWithValue }) => {
        try {
            const response = await fetchDataFromApi(param);
            return response; // 성공 시 반환 데이터
        } catch (error) {
            return rejectWithValue(error.message); // 에러 발생 시 처리
        }
    }
);

 

4) Slice에서 상태 정의 및 Reducer 작성

createSlice를 사용하여 상태와 리듀서를 정의합니다.

import { createSlice } from "@reduxjs/toolkit";
import { fetchData } from "./thunks";

const dataSlice = createSlice({
    name: "data",
    initialState: {
        data: [], // 가져온 데이터
        loading: false, // 로딩 상태
        error: null, // 에러 메시지
    },
    reducers: {
        resetData: (state) => {
            state.data = [];
            state.loading = false;
            state.error = null;
        },
    },
    extraReducers: (builder) => {
        builder
            .addCase(fetchData.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
            .addCase(fetchData.fulfilled, (state, action) => {
                state.loading = false;
                state.data = action.payload; // API 응답 데이터를 저장
            })
            .addCase(fetchData.rejected, (state, action) => {
                state.loading = false;
                state.error = action.payload; // 에러 메시지 저장
            });
    },
});

export const { resetData } = dataSlice.actions;
export default dataSlice.reducer;

 

5) Store 설정

configureStore를 사용해 스토어를 설정합니다.

import { configureStore } from "@reduxjs/toolkit";
import dataReducer from "./slices/dataSlice";

const store = configureStore({
    reducer: {
        data: dataReducer,
    },
});

export default store;

 

6) React 컴포넌트에서 비동기 작업 디스패치

React 컴포넌트에서 useDispatch와 useSelector를 사용하여 상태를 관리합니다.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchData } from "./slices/thunks";

const DataComponent = () => {
    const dispatch = useDispatch();
    const { data, loading, error } = useSelector((state) => state.data);

    useEffect(() => {
        dispatch(fetchData("exampleParam")); // 비동기 작업 실행
    }, [dispatch]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error}</div>;

    return (
        <div>
            {data.map((item, index) => (
                <div key={index}>{item.name}</div>
            ))}
        </div>
    );
};

export default DataComponent;

 

---

4. 비동기 작업의 상태 관리

createAsyncThunk는 다음 세 가지 상태를 자동으로 관리합니다

1. pending
   • 작업 시작 시 디스패치
   • loading 상태를 true로 설정하여 로딩 UI 표시
2. fulfilled
   • 작업 성공 시 디스패치
   • 응답 데이터를 Redux 상태에 저장
3. rejected
   • 작업 실패 시 디스패치
   • 에러 메시지를 Redux 상태에 저장하여 에러 UI 표시

 

---

5. 비동기 작업 관리의 장점

1. 상태 관리 통합: 로딩, 성공, 실패 상태를 Redux로 관리하여 컴포넌트 로직 단순화
2. 중앙 집중식 데이터 관리: 데이터를 전역 상태로 관리하여 여러 컴포넌트에서 재사용 가능
3. 에러 처리 간소화: rejectWithValue를 통해 API 호출 실패를 효율적으로 처리
4. 확장 가능성: 새로운 비동기 작업을 추가할 때 createAsyncThunk를 재사용

---

Redux Toolkit을 활용하면 비동기 작업을 효율적으로 관리할 수 있습니다. 
createAsyncThunk와 createSlice를 사용해 코드를 간결하고 읽기 쉽게 유지하면서, 복잡한 상태 관리와 비동기 작업을 단순화할 수 있습니다.