REACT · FETCH
AbortController 요청 취소 흐름
컴포넌트가 사라지거나 의존성이 바뀐 뒤 오래된 fetch 응답이 state를 바꾸지 않도록 요청 취소 경계를 둡니다.
핵심 구조
abort
create controller
AbortController 생성
fetch(signal)
요청에 signal 연결
cleanup abort
unmount/deps 변경 시 취소
catch branch
AbortError는 조용히 처리
create controller
→
fetch(signal)
→
cleanup abort
→
catch branch
판단 기준
check
stale 응답
늦게 도착한 응답이 최신 화면을 덮지 않게 합니다.
cleanup
effect의 반환 함수에서 abort를 호출합니다.
에러 분기
진짜 실패와 취소 실패를 구분합니다.
UX
취소된 요청은 사용자에게 불필요한 오류로 보이지 않게 합니다.