[AbortController, signal]
https://developer.mozilla.org/ko/docs/Web/API/AbortController
(실험적 기능이므로 호환성 확인 필요)
AbortController 인터페이스는 하나 이상의 HTTP 요청을 취소할 수 있게 해주는 API로 signal은 AbortController API에서 제공하는 객체다
AbortController.AbortController() 생성자를 사용해 새로운 AbortController 를 생성.
AbortController.siganl() : DOM 요청과 통신하거나 취소하는 데 사용되는 AbortSignal 객체 인터페이스를 반환. 읽기 전용.
AbortController.abort() : DOM 요청이 완료되기 전에 취소. 이를 통해 fetch 요청, 모든 응답 Body 소비, 스트림을 취소할 수 있다.
- 요청 취소 기능 : 사용자의 페이지 이동이나 요청 취소 등의 상황에서 이미 불필요해진 요청들을 취소 가능하게 하고,
불필요한 리소스 사용 방지, 사용자 경험 향상! - 성능 향상 : 요청이 취소되면 해당 요청에 대한 처리가 중단되어 불필요한 처리와 렌더링 방지. 전체적 애플리케이션 성능 향상.
- 에러 처리 개선 : 요청 취소된 경우 별도의 에러 처리 로직을 작성할 수 있음
- 코드 유지보수성 개선 : 요청 취소 로직을 별도로 관리해 코드 가독성과 유지보수성 제고.
[axios.get]
axios.get 메서드에서 signal 옵션을 전달하면,
해당 요청을 취소할 수 있다!
axios.get 메서드의 파라미터 : 두 개의 파라미터를 받는다.
- 첫 번째 파라미터: URL 경로
- 두 번째 파라미터: 옵션 객체
아래처럼 사용하면 된다!
근데 여전히 첫 코드에 signal 혼자 덜렁 들어가 있는 게 납득은 안 가네요..?
TanstackQuery 동작 원리(1)
캐시 데이터가 없을 때
const { isPending, data: todos } = useQuery({
queryKey: ["todos"],
queryFn: getTodos,
});
console.log("todos: ", todos);
//(중략)
if (isPending) {
console.log("Main return Loading");
return <h1>Loading...</h1>;
}
- 최초 렌더링 시 todos라는 queryKey로 데이터를 가져오려 했지만 캐시 데이터가 존재하지 않아 undefined 출력 (isPending은 true상태)
: isPending뿐 아니라 isSucess, isError, data 등이 변경되면 해당 상태에 의존하는 컴포넌트가 리렌더링된다.
- useQuery가 queryFn에 의해 데이터를 가져오고 있을 때,isPending이 true이므로 Main return Loading
- getTodos 호출
- 근데 이제 todoList 데이터가 없어서 안 뜨고, 아마 그거 때문에 map도 못 돌리는 듯? 지금 더 파고들 필요는 없다고 판단.
- 데이터가 가져와지면 그 새 데이터를,
todos라는 queryKey를 베이스로 케시컨텍스트에 저장
- 데이터를 다 가져왔으므로 isPending은 false로 변경,
여러 상태가 변경됐고 리액트는 이 변경 감지, 리렌더링 발생
(이 때 실행되는 useQuery에서는 캐시컨텍스트에서 todos라는 이름을 찾고, 이제는 캐시 데이터가 존재하기 때문에 const { isPending, data: todos } = useQuery의 ‘data’에 에 todo list를 담는 것)
TanstackQuery 동작 원리(2)
캐시 데이터가 있을 때
(SWR 전략 상기)
이미 존재하는 캐시 데이터가 있지만 유효하지 않은 경우이다. 아무런 설정을 하지 않았기 때문에 캐시데이터로 저장한 값은 가져오자마자 무조건 유효하지 않은(stale) 상태로 취급. 결론, 그래서 다시 api를 호출.
값을 다 가져오고 나서는 캐시데이터를 갱신, 이후, 기존의 오래된 값을 새로운 값으로 대체. 리렌더링이 일어나고 useQuery가 다시 실행되어 'todos'라는 query key를 베이스로 신선한 데이터를 가져옴.
