리덕스 미들웨어를 통한 비동기 작업 관리

[wongakim-99]

1. 작업환경 준비
2. 미들웨어란?
3. 비동기 작업을 처리하는 미들웨어 사용
4. 정리

[wongakim-99]

리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다. 예를 들어 요청이 시작되었을 때는 로딩 중임을, 요청이 성공하거나 실패했을 때는 로딩이 끝났음을 명시해야 한다. 요청이 성공하면 서버에서 받아 온 응답에 대한 상태를 관리하고, 요청이 실패하면 서버에서 반환한 에러에 대한 상태를 관리해야 한다.

리액트 프로젝트에서 리덕스를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, "미들웨어(middleware)"를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다.

[wongakim-99]

미들웨어란?

리덕스 미들웨어(Redux Middleware)는 리덕스에서 액션이 리듀서에 도달하기 전에 중간에 가로채서, 추가적인 작업을 수행할 수 있게 해주는 함수이다. 리덕스에서의 미들웨어는 주로 비동기 작업을 처리하거나, 로깅, 에러 처리, 또는 액션을 변형하는 등의 용도로 사용된다.

• 액션(Action) : 무언가가 일어났다는 신호를 보냄. 예를 들어, 버튼을 클릭하면 "BUTTON_CLICKED"라는 액션이 발생할 수 있다.
• 리듀서(Reducer) : 액션을 받아서 새로운 상태를 만든다. 예를 들어, 버튼이 클릭되었으니 상태를 "클릭됨"으로 바꾸는 것
• 스토어(Store) : 리덕스의 중앙 저장소로, 상태를 보관함. 모든 컴포넌트가 여기서 상태를 가져온다.

미들웨어는 어떤일을 하는가?

리덕스의 기본 흐름에서는 액션이 발생하면 바로 리듀서로 가지만, 미들웨어가 있으면 이 흐름을 잠시 멈추고 중간에 다른 일을 할 수 있음.

ex)

1. 로그 미들웨어 : 액션이 무엇인지, 그리고 그 결과 상태가 어떻게 변했는지를 콘솔에 출력한다.
2. 비동기 작업 처리 : 예를 들어, 서버에 데이터를 요청해야 하는 경우, 미들웨어가 액션을 가로채서 서버 요청을 보낸 후, 응답을 받으면 새로운 액션을 생성해 리듀서로 보낸다.
3. 액션 변형 : 어떤 액션이 들어왔을 때, 그 액션을 수정하거나 아예 새로운 액션으로 바꿔서 리듀서로 보낼 수 있다.

쉽게 비유해서 설명하자면 미들웨어는 도로 위의 검문소라고 생각할 수 있다. 차(액션)가 출발해서 목적지 (리듀서)로 가는 중간에, 검문소(미들웨어)를 지나야 한다 가정하자. 검문소에서는

• 차가 어디로 가는지 기록(로그 미들웨어)하거나,
• 운전자가 필요한 서류를 미리 준비했는지 확인(비동기 작업 처리)하거나,
• 목적지를 바꿀 수도 있다(액션 변형)

[wongakim-99]

미들웨어는 결국 함수를 반환하는 함수를 반환하는 함수이다. 여기에 있는 함수에서 파라미터로 받아 오는 store는 리덕스 스토어 인스턴스를 .action은 디스패치된 액션을 가리킨다. 이 두 가지 값은 이미 익숙할 것이다. 반면에 next는 생소할 것이다. next 파라미터는 함수 형태이며, store.dispatch와 비슷한 역할을 한다. 큰 차이점이 있다면 next(acion)을 호출하면 그 다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그다음 미들웨어가 없다면 리듀서에게 액션을 넘겨준다는 것이다.

미들웨어 내부에서 store.dispatch를 사용하면 첫 번째 미들웨어부터 다시 처리한다. 만약 미들웨어에서 next를 사용하지 않으면 액션이 리듀서에 전달되지 않는다. 즉 액션이 무시된다는 것이다.

[wongakim-99]

미들웨어에서는 여러 종류의 작업을 처리할 수 있음. 특정 조건에 따라 액션을 무시하게 할 수도 있고, 특정 조건에 따라 액션 정보를 가로채서 변경한 후 리듀서에게 전달해 줄 수도 있음. 아니면 특정 액션에 기반하여 새로운 액션을 여러 번 디스패치할 수도 있다.

이러한 미들웨어 속성을 사용하여 네트워크 요청과 같은 비동기 작업을 관리하면 매우 유용함.

[wongakim-99]

비동기 작업을 처리하는 미들웨어 사용

• redux-thunk : 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어. 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다.
• redux-saga : redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리이다. 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해준다.

※ 디스패치는 명령을 전달하는 것과 비슷

상황: 회사에서 팀장이 팀원에게 일을 지시한다고 생각해보세요. 액션(Action): 팀장이 "보고서를 작성해줘"라고 말하는 것이 액션입니다. 디스패치(Dispatch): 팀장이 이 명령을 팀원에게 전달하는 것이 디스패치입니다. 리듀서(Reducer): 팀원이 이 명령을 받아서 실제로 보고서를 작성하는 것이 리듀서입니다. 스토어(Store): 회사 전체의 상태(모든 팀원의 업무 상황 등)를 관리하는 시스템이 스토어입니다.

[wongakim-99]

redux-thunk 는 리덕스를 사용하는 프로젝트에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어임. redux-thunk 라이브러리를 사용하면 thunk 함수를 만들어서 디스패치할 수 있음. 그러면 리덕스 미들웨어가 그 함수를 전달받아 store의 dispatch와 getState를 파라미터로 넣어서 호출해 줌.

[wongakim-99]

redux-thunk 는 액션 생성 함수에서 일반 액션 객체를 반환하는 대신에 함수를 반환한다.

increaseAsync와 decreaseAsync 함수를 만들어 카운터 값을 비동기적으로 변경

[wongakim-99]

웹 요청 비동기 작업 처리하기

thunk의 속성을 활용하여 웹 요청 비동기 작업을 처리. 웹 요청을 연습하기 위해 JSONPlaceholder 에서 제공되는 가짜 API를 사용

포스터 읽기

GET https://jsonplaceholder.typicode.com/posts/:id

모든 사용자 정보 불러오기

GET https://jsonplaceholder.typicode.com/users

API를 호출할 때는 주로 Promise 기반 웹 클라이언트인 axios를 사용. 따라서 axios 설치 진행