Redux Middleware
액션이 리듀서에 도달하기 전에 중간에서 가로채서 추가적인 작업을 수행할 수 있게 해주는 함수
이를 통해 비동기 로직을 처리하거나 로그를 기록, 에러 처리 등의 작업을 할 수 있다
- 대표적인 미들웨어 : redux thunk
일반 redux와 redux thunk
일반 redux
- UI 컴포넌트에서 dispatch가 일어난다
- dispatch가 일어날 때 action 객체를 dispatch한다
- action 객체는 리듀서로 전달되어 redux store를 업데이트 한다
redux thunk
- UI 컴포넌트에서 dispatch가 일어난다
- dispatch가 일어날 때 thunk 함수를 dispatch한다
- 전달된 thunk함수에 의해 redux thunk 미들웨어가 이 함수를 호출하고, 함수 안에서 비동기 작업을 수행한다
- 비동기 로직이 수행된 이후 필요에 따라 액션 객체를 별도로 생성하여 dispatch한다
- dispatch된 action 객체는 리듀서로 전달되어 redux store를 업데이트 한다
redux thunk를 사용했을때 이점
- 상태 관리의 일관성
redux thunk를 사용하여 비동기 로직을 중앙에서 관리할 수 있음 - 비즈니스 로직 분리 : 비동기 로직을 액션 크리에이터로 분리하여 UI로직과 비즈니스 로직을 분리하고, 유지보수성과 가독성을 향상 시킨다
❗️ 비즈니스 로직 : 애플리케이션의 핵심 동작을 정의하는 코드 - 로딩 및 에러 상태 관리의 용이성 : redux thunk와 redux toolkit을 사용하여
isLoading과isError등의 상태를 중앙에서 일관되게 관리할 수 있어, 상태 변화에 따른 UI 업데이트가 용이하다
redux thunk를 사용했을때 한계점
- 복잡성이 증가한다
비동기 로직이 복잡해질수록 액션 크리에이터와 리듀서의 코드가 길어지고, 보일러플레이트 코드가 많아져 유지보수가 어려워 진다
❗️ 보일러플레이트 코드 : 반복적이고 틀에 박힌 코드 - 테스트가 복잡해진다
비동기 로직을 포함한 액션 크리에이터를 테스트하는 것이 복잡하며, 다양한 응답 상태와 비동기 작업을 시뮬레이션하기 위한 별도의 장치가 필요하여 테스트 코드가 복잡해진다
TanStack Query
위에서 설명한 문제들을 해결하기 위해 생겼다
서버 상태를 관리하기 위한 라이브러리로 데이터를 패칭하고 캐싱, 동기화, 무효화 등의 기능을 제공한다
- 비동기 로직의 복잡성 해결
1. 기존의 useEffect, useState를 사용한 비동기 데이터 처리 방식은 상태 관리가 복잡하고 코드 중복이 많아 유지보수가 어려웠다.
2. redux thunk와 같은 미들웨어를 사용해도 비동기 로직의 테스트가 복잡하고 보일러플레이트 코드가 많이 생기기 때문에 더 효율적인 도구가 필요했다- 서버 상태 관리의 어려움 해결
1. 서버 상태는 클라이언트 상태와 달리 캐싱, 동기화, 재검증 등 관리해야 할 요소가 많아 기존 방법으로는 관리가 어려웠다
2. 서버 상태 관리를 쉽게 해주고 비동기 로직을 단순화 시켜준다
주요기능
-
데이터 캐싱
동일한 데이터를 여러번 요청하지 않도록 캐싱하여 성능을 향상시킨다 -
자동 리패칭
데이터가 변경되었을때 자동으로 리패칭하여 최신상태를 유지한다 -
쿼리 무효화
특정 이벤트가 발생했을때 쿼리를 무효화하고 데이터를 다시 가져올 수 있다
사용법 - 세팅
- 프로젝트 생성
yarn add @tanstack/react-query명령어로 라이브러리를 설치- main.jsx 또는 App.jsx에 QueryClientProvier로 감싸준다
useQuery
데이터를 가져올 때 사용한다 (Read)
- useQuery는 두개의 인자를 받는다
- queryKey : [] 와 queryFn : 함수가 들어간다
useMutation
데이터를 생성, 수정, 삭제 할 때 사용한다 (Create, Update, Delete)
- useMutation()도 mutationFn : 함수가 들어간다
- useMutation을 받은 mutation을 아래에서 mutate()로 실행시킨다
invalidateQuery
새로고침을 하지 않아도 수정된 정보(데이터)들을 refresh 한다
- useMutation()에 onSuccess : 함수를 추가한다
- queryClient.invalidateQueries(["key"]) 로직을 추가한다
❗️ invalidateQuery는 쿼리 key를 넣어줘야 한다
