오늘 한 일
- [특강] React 심화
학습 내용
Query Cancelation
대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 발생하는 fetching을 취소시켜 불필요한 네트워크 요청을 제거하기 위해 사용된다.
따로 설정을 하지 않으면 다른 페이지로 이동하여 기존 컴포넌트가 언마운트되어도 기존에 요청된 데이터는 멈추지 않고 fetching을 계속 진행하게 된다.
1. QueryFunctionContext
useQuery의 queryFn을 실행시킬 때 매개변수로 **queryFnContext**를 받는다.
queryFnContext는 queryKey, pageParam, signal, meta 네가지 프로퍼티를 가진 객체이다.데이터를 axios.get 해올 때 두번째 인자(설정 객체)로{signal}을 넣으면 다운로드 중 중단을 시킬 수 있는 준비가 된 것이다.
export const getTodos = async (queryFnContext) => {
const { queryKey, pageParam, signal, meta } = queryFnContext;
const response = await axios.get("http://localhost:5000/todos", { signal });
return response.data;
};
useQuery({
queryKey: ["todos"],
queryFn: getTodos,
})- queryKey : 배열 형태의 쿼리 키
- pageParam :
useInfiniteQuery사용 시getNextPageParam실행 시 적용 - signal : AbortSignal을 의미(useQuery 내부적으로 자동 구현되어 있음)
- meta : 메모장 같이 메모를 남길 수 있는 string 필드
2. 자동으로 Query 취소
페이지가 언마운트 되었을 때 자동으로 네트워크를 취소시킬 수 있다.
import axios from 'axios'
export const getTodos = async ({ signal }) => {
const response = await axios.get("http://localhost:5000/todos", { signal });
return response.data;
};
const query = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
})3. 수동으로 Query 취소
다운로드 중 취소 버튼을 클릭하여 수동으로 네트워크를 취소시킬 수 있다.
- QueryClient의
cancelQueries메서드 이용
const queryClient = useQueryClient()
return (
<button
onClick={(e) => {
e.preventDefault()
queryClient.cancelQueries({ queryKey: ['todos'] })
}}
>
Cancel
</button>
)🔎 모든 get 요청마다 Abort Signal을 심어야하나?
모든 get 요청마다 Abort Signal을 심으면 작업 부하를 올리게 되므로
필요할 때마다 구분하여 적절하게 사용해야 한다.
- 동영상 다운로드같은 대용량 fetching 작업 시
- Optimistic UI를 구현할 때
오늘의 회고
그동안 놓쳤던 특강 강의들을 들었는데, 리액트는 정말 다양한 기능들을 가지고 있다. 그만큼 알아야 할 것들이 참 많다...^^ 오늘 쿼리 요청을 중간에 취소하는 방법을 새로 알게되었는데, 유용한 기능인 것 같다. 최종 프로젝트에서 적용할 수 있는 부분이 있다면 한 번 적용해 봐야겠다.
주변에 이미 최종 프로젝트 팀을 꾸린 사람들이 많은 것 같다. 나는 아직 팀을 꾸리지 못한 입장에서 좀 불안하다... 팀에 대해 얘기를 나눈 사람들은 있지만, 나는 리더나 부리더는 할 자신이 없어서... 팀이 정해지지 않은 사람들을 랜덤으로 배정하게 되면 누가 같은 팀이 될지 아무도 모르는거라..걱정이 되긴 한다.
