AbortController — 비동기 작업 취소 패턴

fetch 취소

const controller = new AbortController();

// 5초 타임아웃
setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch("/api/data", {
    signal: controller.signal,
  });
} catch (err) {
  if (err.name === "AbortError") {
    console.log("요청이 취소되었습니다");
  }
}

React에서 활용

useEffect(() => {
  const controller = new AbortController();
  fetchData(controller.signal);
  return () => controller.abort();  // 언마운트 시 취소
}, []);

여러 fetch를 하나의 signal로 그룹 취소할 수도 있습니다.