[리액트] 미들웨어 이해하기

미들웨어란 무엇인가?

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 처리되기 전에 특정 작업을 수행할 수 있게 해주는 기능이다. 예를 들어 API 호출, 로깅, 액션 취소 등 다양한 작업을 할 수 있다.

미들웨어가 필요한 이유는 주로 비동기 작업이나 부가적인 처리를 해야 할 때 나타난다. 리듀서는 순수 함수여야 하기 때문에, 그 자체로는 API 호출이나 로깅 등의 부수 효과(side-effects)를 가지는 작업을 할 수 없다.

미들웨어의 주요 역할

1. 액션 객체 검증: 액션 객체의 유효성을 검사해 잘못된 액션을 걸러낼 수 있다.
2. 액션 로깅: 액션의 발생을 로깅해 디버깅을 쉽게 할 수 있다.
3. 비동기 작업 처리: thunk나 saga 같은 미들웨어를 사용해 비동기 로직을 쉽게 관리할 수 있다.

미들웨어 만드는 방법

미들웨어는 보통 아래와 같은 형태로 만든다.

const myMiddleware = store => next => action => {
  // 미들웨어 로직
  return next(action);
};

미들웨어 적용하기

미들웨어를 적용하기 위해선 applyMiddleware 함수를 사용한다.

import { createStore, applyMiddleware } from 'redux';
import myMiddleware from './myMiddleware';

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

미들웨어 예시: 로깅 미들웨어

간단한 로깅 미들웨어를 만들어 볼까? 코드는 아래와 같다.

const logger = store => next => action => {
  console.log('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
};

비동기 미들웨어: Thunk

Thunk 미들웨어는 함수 형태의 액션을 디스패치할 수 있게 해준다.

const thunk = store => next => action => {
  if (typeof action === 'function') {
    return action(store.dispatch, store.getState);
  }
  return next(action);
};

결론

리덕스 미들웨어는 액션을 디스패치했을 때 추가적인 작업을 할 수 있게 해주는 강력한 기능이다. 미들웨어를 통해 코드의 유지보수성과 확장성을 높일 수 있다.