[React] Redux 미들웨어 사용법

Redux 미들웨어 사용법에 대해 정리해 보려구 해요

미들웨어는 중간에서 확인하고 처리해주는 역할을 합니다.

반응형

---

Redux에서 미들웨어는 어디에 쓰일까?

Redux에서는 액션이 리듀서로 가기 전에 미들웨어가 중간에서 그걸 확인하고 처리할 수 있습니다.

 

예를 들면,

📍 로그를 남긴다

지금 어떤 액션이 발생했는지 기록하기

📍 비동기 작업을 처리

서버에서 데이터를 가져오고 기다리는 기능 추가

📍 에러 감지

문제가 있으면 경고를 띄우기

---

🎮 미들웨어를 직접 만들어보자!

 

const myMiddleware = store => next => action => {
  console.log("미들웨어가 액션을 받았어요:", action);
  return next(action); // 다음 단계로 액션을 넘겨줌
};

 

💡 위 코드에너 store는 Redux 저장소, next는 다음으로 넘기는 함수, action은 실행되는 액션입니다.

---

📌 미들웨어를 Redux에 추가하는 방법

import { createStore, applyMiddleware } from "redux";

const store = createStore(reducer, applyMiddleware(myMiddleware));

 

💡 여기서 applyMiddleware(myMiddleware)를 사용해서 미들웨어를 추가합니다.

---

🎯 정리

1️⃣ 미들웨어는 액션이 리듀서로 가기 전에 중간에서 도와주는 역할을 한다.
2️⃣ 주로 로그 기록, 비동기 처리, 에러 감지 등에 사용된다.
3️⃣ Redux에 applyMiddleware 를 사용해서 추가할 수 있다.