REACT · FETCH

AbortController 요청 취소 흐름

컴포넌트가 사라지거나 의존성이 바뀐 뒤 오래된 fetch 응답이 state를 바꾸지 않도록 요청 취소 경계를 둡니다.

AbortController 요청 취소 흐름 구조

abort
create controllerAbortController 생성
fetch(signal)요청에 signal 연결
cleanup abortunmount/deps 변경 시 취소
catch branchAbortError는 조용히 처리
create controller→fetch(signal)→cleanup abort→catch branch

AbortController 요청 취소 흐름

점검
stale 응답늦게 도착한 응답이 최신 화면을 덮지 않게 합니다.
cleanupeffect의 반환 함수에서 abort를 호출합니다.
에러 분기진짜 실패와 취소 실패를 구분합니다.
UX취소된 요청은 사용자에게 불필요한 오류로 보이지 않게 합니다.