Redux 미들웨어

지난 시간에 이어

리액트에서의 리덕스와 그 구조에 대해서 간단하게 알아봤다. 하지만 미들웨어란 것이 남았다. 오늘도 마찬가지로 벨로퍼트와 함께하는 모던 리액트강의를 따라해 보았다. 하면서 배운 내용을 그냥 정리해보자. 근데 볼수록 리덕스 구조가 생각보다 복잡하다.. 다 알아갈 수 있을까..?

Redux 미들웨어

redux 홈페이지에서 미들웨어를 잘 설명해주고 있다. 마치 Express, Koa와 같은 서버 측 라이브러리에서의 미들웨어와 비슷하다. 대신 요청과 응답 사이가 아닌 action을 dispatching 하는 부분과 그 action이 리듀서에 도착하기 전 그 사이에 사용 할 수 있다.

프로젝트 준비

이번에도 저번에 Redux 공부할 때 사용했던 예제를 그대로 사용했다! 다시 만들기 귀찮으니 그대로 조금씩 고쳐서 하는걸로 해봤다.
CRA를 사용한 프로젝트에 리듀서를 만들고, 컴포넌트를 Presentational / Container로 나누었다. 함수형 컴포넌트를 사용하여 react-redux의 useSelect, useDispatch 등과 같은 훅을 사용해봤다.

간단한 미들웨어

이 부분도 강의에서 나온대로 해보았는데 잘 이해가 되진 않았다. myLogger라는 함수로 console.log를 통해 action과 결과를 출력해보는 미들웨어인데, 함수가 연속적으로 반환되는 그런구조인데 next는 어디서 온것인지 잘 이해가 안된다. store에서 제공하는것일까..?

일단 구조를 function 키워드로 나타내면 이렇게 된다.

function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

내가 사용할 것은 액션을 출력하고, next로 액션을 넘긴 후에 이후 상태를 다시 출력하는 형태이다.
action을 사용하는 함수를 반환하는 함수가 myLogger인데 화살표로 나타내니 이렇게 됐다.

const myLogger = store => next => action => {
    console.log(action); // 액션출력!
    const result = next(action); // 다음 미들웨어 or 리듀서에게 액션 전달.
    
    //업데이트 이후 상태
    console.log('\t', store.getState()); // \t:탭
    
    return result; // 반환값은 dispatch(action)의 결과
}

export default myLogger;

이런식으로 사용하면, 어떤 액션이 바로 처리되는 대신에 미들웨어에서 어떤 조건에 따라 액션을 무시하거나 실행할 수도 있고, 변경한 후에 리듀서에게 전달하거나 할 수 있다고 한다. 특히 비동기 작업을 관리할 때 미들웨어를 사용한다고 하니 백엔드와 비동기 통신 하는 부분에서 꼭 사용해야 할 것같다.

공부할것

• 화살표함수랑 함수를 반환하는 형태에 대해서 다시 찾아봐야겠다. 조금 안다고 생각했는데 이런 구조를 보니 흐름을 잘 모르겠다.
• 많이 사용하는 redux-thunk랑 redux-saga에 대해 공부해야겠다. 사실 이것만 뚝딱 알아보고 대충 써보면 될 줄 알았는데 그러기엔 내 내공이 너무 부족한 것 같다.