[React] 미들웨어

미들웨어란?

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 직정된 작업을 실행할 수 있게 해준다. 액션과 리듀서 사이의 중간자라고 볼 수 있다. 전달받은 액션을 단순히 콘솔에 기록하거나, 전달받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당한다.

---

기본 구조

const loggerMiddleware = store => next => action => {
  //기본 구조
}

export default loggerMiddleware;

const loggerMiddleware = function loggerMiddleware(store){
  return function(next){
    return function(action){
      //기본 구조
    }
  }
}

export default loggerMiddleware;

---

미들웨어는 왜 필요한가?

기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토어에서 상태 변화의 필요성을 알리게 된다. 하지만, 디스패치된 액션을 스토어로 전달하기 전에 처리하고 싶은 작업이 있을 수 있다. 예를 들면, 단순히 어떤 액션이 발생했는지 로그를 남길 수도 있고, 액션을 취소해버리거나, 또 다른 액션을 발생시킬 수도 있다.

우리가 알고 있는 리덕스는 동기적인 흐름을 통해 동작한다. 액션 객체가 생성되고, 디스패치가 액션 발생을 스토어에 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정이다. 하지만, 동기적인 흐름만으로는 처리하기 힘든 작업들이 있다. 예를 들어, 시간을 딜레이시켜 동작하게 한다던지, 외부 데이터를 요청하여 그에 따른 응답을 화면에 보여주어야 하는 경우가 있다. 이러한 비동기 작업을 처리하기 위한 지침을 알려주지 않고 있기 때문에 이러한 비동기 작업을 처리하는데 있어 리덕스 미들웨어를 주로 사용한다.

---

Redux Thunk

Redux Thunk는 액션 생성자가 리턴하는 것을 객체가 아닌 함수를 사용할 수 있게 한다. 그리고 함수를 리턴하면 그 함수 실행이 끝난 뒤에 값을 액션으로 넘겨준다. 기존에 액션 생성자가 리턴하는 객체로는 처리하지 못한 비동기 작업을 Redux Thunk를 사용하면서 일반 함수를 리턴할 수 있게 됨에 따라 일반 함수에서 가능한 모든 동작들이 가능해진다. 그중에 비동기 통신 작업을 할 수 있어 사용하는 것이다.