[React] Redux Middleware: 리덕스의 숨은 영웅들 🦸‍♂️🦸‍♀️

Redux Middleware 톺아보기! 🦸‍♂️🦸‍♀️

Redux를 사용하다 보면, 단순히 상태를 관리하는 걸 넘어 더 복잡한 작업을 처리해야 할 때가 있어요. 예를 들어, 비동기 API 호출이나 로그 출력 같은 일을 말이죠. 바로 여기서 Redux Middleware가 등장합니다.

 

Middleware는 마치 액션과 리듀서 사이에서 일을 처리하는 비밀 요원 같아요. 오늘은 이 요원을 제대로 이해하고, 실무에서도 유용하게 사용할 수 있도록 팍팍 알려드릴게요. 😊

---

🔍 Middleware란 무엇일까?

Redux에서 Middleware는 액션이 리듀서에 도달하기 전에 중간에서 가로채고 추가 작업을 수행하는 도구입니다.

 

쉽게 말해:

1. 액션이 디스패치(dispatch)되면,
2. Middleware가 그 액션을 가로채,
3. 뭔가 작업을 한 뒤에 리듀서로 넘기거나, 넘기지 않거나(!) 할 수 있죠.

✨ 비유: Middleware는 택배를 중간에 가로채서 물건을 확인하고, 포장지를 바꿔 다시 배달하는 택배 심사관이에요. 📦

---

🔦 Middleware의 주요 역할

Middleware가 없으면 Redux는 정말 단순한 상태 관리 도구일 뿐이에요. Middleware 덕분에 Redux는 다양한 일을 할 수 있죠

1️⃣ 비동기 작업 처리

API 요청이나 타이머 같은 작업을 비동기로 처리할 수 있어요.

2️⃣ 로깅

디버깅을 위해 액션과 상태를 로깅할 수 있어요.

3️⃣ 조건부 액션 처리

특정 조건에 따라 액션을 막거나, 새로운 액션을 추가로 디스패치할 수 있어요.

4️⃣ 추가적인 액션 생성

하나의 액션을 여러 개의 액션으로 변환하거나, 자동으로 새로운 액션을 디스패치할 수 있어요.

---

⚙️ Middleware의 동작 원리

Redux Middleware는 store의 dispatch 메서드를 확장해서 동작합니다.

 

Middleware는 다음과 같은 흐름을 따릅니다:

1. store: 리덕스 스토어가 생성됩니다.
2. dispatch(action): 액션이 디스패치됩니다.
3. Middleware: 액션을 가로채 추가 작업을 수행합니다.
4. reducer: 가공된 액션이 리듀서로 전달됩니다.
5. store: 리듀서가 새로운 상태를 반환합니다.

---

👩🏻‍💻 Middleware 사용해보기

기본 로거(Logger) Middleware 구현

가장 간단한 예로, 액션과 상태를 로그로 출력하는 Middleware를 만들어볼게요.

const loggerMiddleware = (store) => (next) => (action) => {
  console.log('디스패치된 액션:', action);
  const result = next(action); // 다음 Middleware 또는 리듀서로 전달
  console.log('업데이트된 상태:', store.getState());
  return result;
};

 

👉 여기서:

• store: Redux 스토어
• next: 다음 Middleware 또는 리듀서
• action: 현재 처리 중인 액션

이 Middleware는 액션을 로그로 출력하고, 리듀서로 넘긴 뒤 업데이트된 상태도 출력해요.

---

🚀 Redux에서 Middleware 적용하기

 

Redux에서 Middleware를 적용하려면 applyMiddleware를 사용해야 해요.

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import loggerMiddleware from './middlewares/logger';

const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware) // 여기서 Middleware 등록!
);

---

💼 실무에서 흔히 쓰는 Middleware들

1️⃣ Redux Thunk

Redux Thunk는 비동기 작업을 처리하기 위한 가장 기본적인 Middleware에요.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_DATA_START' });
  const data = await fetch('/api/data').then((res) => res.json());
  dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
};

store.dispatch(fetchData());

 

Thunk는 액션 대신 함수를 디스패치할 수 있도록 해줍니다. 비동기 API 호출 시 유용하죠.

 

2️⃣ Redux Saga

Redux Saga는 Thunk보다 더 강력하고 복잡한 비동기 작업 처리를 위한 도구에요. yield와 generator를 활용해서 이벤트를 선언적으로 처리할 수 있답니다.

import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchData() {
  const data = yield call(fetch, '/api/data');
  yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
}

function* rootSaga() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchData);
}

 

3️⃣ Redux Logger

Redux Logger는 로깅에 특화된 Middleware로, 디버깅에 큰 도움을 줘요.

import logger from 'redux-logger';

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

---

🎒 Middleware 만들기 실습

액션 차단기: 특정 액션을 막아보자!

const blockActionMiddleware = (store) => (next) => (action) => {
  if (action.type === 'BLOCK_THIS_ACTION') {
    console.warn('이 액션은 차단되었습니다:', action);
    return; // 리듀서로 전달하지 않음!
  }
  return next(action); // 다른 액션은 정상 처리
};

 

다중 액션 처리기: 한 액션으로 여러 작업 실행하기

const multiActionMiddleware = (store) => (next) => (action) => {
  if (Array.isArray(action)) {
    action.forEach((singleAction) => store.dispatch(singleAction));
    return;
  }
  return next(action);
};

---

🌫️ Middleware의 장점과 한계

장점

1. 유연성: 다양한 작업을 처리 가능 (로깅, 비동기, 조건부 액션 등)
2. 확장성: 기존 Redux 흐름에 영향을 주지 않으면서 기능 추가 가능
3. 코드 분리: 액션과 리듀서의 책임을 분리하여 코드의 가독성을 높임

한계

1. 복잡성 증가: 너무 많은 Middleware는 유지보수를 어렵게 할 수 있음
2. 디버깅 난이도: Middleware에서 발생하는 오류는 추적하기 어려울 수 있음

---

🛤️ Redux Middleware의 미래

Middleware는 Redux 생태계에서 필수적인 도구이지만, 대규모 프로젝트에서는 적절히 선택하고 조합하는 것이 중요해요. Thunk와 Logger 같은 간단한 도구부터 Saga 같은 복잡한 도구까지, 여러분의 프로젝트와 팀 스타일에 맞는 선택을 하세요!

 

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