[React] Redux Thunk: 미들웨어의 맛깔나는 조미료 🍲

Redux Thunk 톺아보기! 🍲

Redux Thunk는 Redux에서 비동기 작업을 처리할 수 있게 해주는 미들웨어입니다. “Thunk”라는 이름은 다소 신비롭게 들릴 수 있지만, 간단히 말해 액션을 리턴하는 함수를 디스패치할 수 있게 만들어주는 도구라고 생각하면 돼요.

 

이 글에서는 Redux Thunk가 왜 필요한지, 어떻게 작동하는지, 그리고 어떻게 활용할 수 있는지 다룰게요. 준비되셨나요? 출발~! 🚀

---

🔍 Redux에서 비동기 작업이 왜 필요한가?

Redux는 순수한 상태 관리 라이브러리로, 단방향 데이터 흐름을 유지하는 것을 목표로 합니다.

즉, 액션(Action)이 발생하면 리듀서(Reducer)가 새로운 상태를 반환하고, 상태가 변경되면 UI가 업데이트되죠.

 

하지만… 여기서 문제가 하나 있어요:

 

Redux는 기본적으로 동기 작업만 처리할 수 있다는 점입니다.

하지만 우리는 데이터를 가져오기 위해 API 호출 같은 비동기 작업을 처리해야 하는 경우가 많잖아요? 여기서 Redux Thunk가 등장합니다.

---

💡 Redux Thunk란?

Thunk는 원래 함수를 래핑해서 나중에 실행할 수 있도록 만든 것을 의미합니다. Redux Thunk는 이 개념을 Redux에 적용하여 액션 생성자가 함수를 반환할 수 있도록 만들어줍니다.

 

기본적으로 Redux는 객체만 반환할 수 있지만, Redux Thunk를 사용하면 함수를 반환할 수 있습니다.

함수를 반환하면 그 함수 안에서 비동기 작업(API 호출 등)을 수행하고, 작업이 끝난 후에 액션을 디스패치할 수 있어요.

---

⚙️ 설치 및 설정

Redux Thunk를 사용하려면 미들웨어로 추가해야 합니다.

npm install redux-thunk

 

store를 생성할 때 applyMiddleware를 통해 Redux Thunk를 추가하세요:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

 

이제 Redux Thunk를 사용할 준비 완료! 🎉

---

📋 Redux Thunk 기본 사용법

Thunk의 기본 아이디어는 액션 대신 함수를 반환하는 액션 생성자를 만드는 것입니다.

// 일반 액션 생성자
const increment = () => ({ type: "INCREMENT" });

// Thunk 액션 생성자
const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: "FETCH_DATA_REQUEST" });
    try {
      const response = await fetch("https://api.example.com/data");
      const data = await response.json();
      dispatch({ type: "FETCH_DATA_SUCCESS", payload: data });
    } catch (error) {
      dispatch({ type: "FETCH_DATA_FAILURE", error });
    }
  };
};

 

👉 여기서 fetchData는 함수를 반환하는 액션 생성자입니다.

이 함수는 dispatch를 받아서 비동기 작업을 실행한 후, 성공 또는 실패에 따라 다른 액션을 디스패치합니다.

---

🚁 비동기 작업 단계별 처리

비동기 작업을 Redux Thunk로 처리할 때는 보통 세 가지 단계로 나뉩니다:

1. 요청 시작: 데이터를 가져오기 시작했음을 알리는 액션 디스패치
2. 요청 성공: 데이터를 성공적으로 가져왔음을 알리는 액션 디스패치
3. 요청 실패: 요청 중 에러가 발생했음을 알리는 액션 디스패치

// 리듀서 예시
const initialState = {
  loading: false,
  data: null,
  error: null,
};

function dataReducer(state = initialState, action) {
  switch (action.type) {
    case "FETCH_DATA_REQUEST":
      return { ...state, loading: true, error: null };
    case "FETCH_DATA_SUCCESS":
      return { ...state, loading: false, data: action.payload };
    case "FETCH_DATA_FAILURE":
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

---

👩🏻‍💻 실전 예제: 사용자의 목록 가져오기

액션 생성자

export const fetchUsers = () => {
  return async (dispatch) => {
    dispatch({ type: "FETCH_USERS_REQUEST" });

    try {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      const users = await response.json();
      dispatch({ type: "FETCH_USERS_SUCCESS", payload: users });
    } catch (error) {
      dispatch({ type: "FETCH_USERS_FAILURE", error: error.message });
    }
  };
};

 

리듀서

const initialState = {
  loading: false,
  users: [],
  error: null,
};

function usersReducer(state = initialState, action) {
  switch (action.type) {
    case "FETCH_USERS_REQUEST":
      return { ...state, loading: true, error: null };
    case "FETCH_USERS_SUCCESS":
      return { ...state, loading: false, users: action.payload };
    case "FETCH_USERS_FAILURE":
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
}

 

컴포넌트에서 사용하기

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchUsers } from "./actions";

function UserList() {
  const dispatch = useDispatch();
  const { loading, users, error } = useSelector((state) => state.users);

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);

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

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

---

⚠️ Redux Thunk 사용 시 주의점

1. 미들웨어가 필요 없을 경우

Redux Thunk는 비동기 작업을 처리하기 위한 도구입니다. 동기 작업만 있다면 불필요하게 사용할 필요는 없어요.

 

2. 너무 많은 비즈니스 로직

Thunk 내부에서 너무 많은 로직을 처리하면 코드가 복잡해질 수 있습니다.

비즈니스 로직은 액션 생성자보다는 리듀서에서 관리하는 게 좋습니다.

 

3. Redux Toolkit 활용

최근에는 Redux Toolkit이 기본적으로 Thunk를 포함하고 있어 설정이 더 간단합니다. Redux Toolkit도 한번 검토해 보세요.

---

📚 Redux Thunk vs Redux Saga

Redux Thunk와 자주 비교되는 도구로는 Redux Saga가 있습니다.

둘 다 비동기 처리를 돕지만, 접근 방식이 다릅니다:

특징	Redux Thunk	Redux Saga
설치 및 사용	간단하고 직관적	설정과 코드가 더 복잡함
비동기 처리	함수 기반으로 비동기 작업 처리	제너레이터 기반으로 복잡한 작업 처리
학습 곡선	낮음	높음
유스 케이스	간단한 비동기 로직	복잡한 비동기 흐름

---

🔖 결론: Redux Thunk로 깔끔한 비동기 관리 🎉

Redux Thunk는 비동기 작업을 Redux에 통합하기 위한 훌륭한 도구입니다.

간단한 API 호출부터 복잡한 데이터 흐름까지, Redux Thunk로 깔끔하게 처리해 보세요.

 

🌷전설의 개발자가 되어봅시당!🌷