리덕스 미들웨어

Noa·2022년 12월 27일
0

React

목록 보기
22/22

리덕스 미들웨어는 리덕스가 지니고 있는 핵심기능

미들웨어

어떠한 두가지 요소의 중간에서 동작하는 소프트웨어라고 생각할 수 있다.

리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수있다.

-> Q 추가적인 작업이란?

특정 조건에 따라 액션이 무시되게 만들 수 있다.
액션을 콘솔에 출력하거나, 서버쪽에 로깅할 수 있다.
액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있다.
특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있다.
특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있다.

-> Q 언제 미들웨어를 사용하는가?

보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때 이다. 예를 들어 리엑트 앱에서 우리가 만약 백엔드 API를 연동해야 된다면, 리덕스 미들웨어를 사용하여 처리한다.

리덕스 미들웨어는 누구든지 만들어서 사용할 수 있지만, 일반적으로는 리덕스 미들웨어 라이브러리를 설치해서 사용한다 -> 비동기 작업에 관련된 미들웨어 라이브러리는 redux-thunk, redux-saga, redux-observable, redux-promise-middleware 등이 있다.

미들웨어를 사용하여 비동기작업을 처리하는 방법을 배우게 될 때, redux-thunk와 redux-saga 이 두라이브러리가 가장 많이 사용된다.

Thunk란??

redux는 기본적으로 액션 객체만을 디스패치 할수 있다. 하지만 Reudx thunk를 활용하면 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다. 이러한 동작 방식을 활용하여 redux에서 비동기적인 프로그래밍을 구현할 수 있다.

TDZ(Temporal Dead Zone/일시적 사각지대)란?

https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/

서버 -> (axios) -> 컴포넌트 -> (디스패치) -> 스토어 -> (useSelector) -> 컴포넌트

서버 -> (썽크 함수) -> 스토어 -> (useSelector) -> 컴포넌트

profile
몰입

0개의 댓글