Frontend Academy · 강의

정리를 위한 AbortController

AbortController를 만들고 그 signal을 fetch에 전달하며, 마운트 해제된 컴포넌트의 상태 업데이트를 방지하도록 정리 함수에서 진행 중인 요청을 취소합니다.

정리를 위한 AbortController은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

데이터 요청을 취소하는 이유

구성 요소가 마운트 해제되거나 데이터를 다시 가져올 때 이전 요청이 아직 진행 중일 수 있습니다. 이전 요청이 새 요청보다 늦게 완료되면 오래된 데이터가 최신 데이터를 덮어씁니다. AbortController는 진행 중인 요청을 깔끔하게 취소합니다.

AbortController 기초

AbortController를 만들고, 해당 signal을 데이터 가져오기에 전달한 다음, controller.abort()를 호출하여 취소하세요. 데이터 가져오기는 중단되면 AbortError를 발생시킵니다.

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

useEffect 정리에서 사용하기

효과가 시작될 때 AbortController를 만들고 정리 함수에서 요청 중단을 호출하세요. 이렇게 하면 의존성이 변경되거나 구성 요소가 마운트 해제될 때 요청이 자동으로 취소됩니다.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError와 네트워크 오류 비교

중단된 요청은 이름이 'AbortError'인 DOM 예외를 발생시킵니다. 항상 이를 별도로 확인하고 사용자에게 보이는 오류로 표시하지 마세요. 예상된 정리 동작이기 때문입니다.

signal.aborted 속성

controller.signal.aborted를 확인하여 신호가 중단되었는지 테스트하세요. 비동기 코드에서 setState를 호출하기 전에 확인할 때 유용합니다.

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

여러 요청 취소하기

모든 요청에 동일한 신호를 전달하면 하나의 AbortController로 여러 데이터 가져오기 요청을 취소할 수 있습니다.

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

Axios에서 AbortController 사용하기

Axios는 구성에서 signal 옵션을 통해 AbortController의 신호를 지원합니다. 신호 인터페이스는 데이터 가져오기와 동일합니다.

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

React Query가 자동으로 처리합니다

TanStack Query(React Query)를 사용하면 취소가 자동으로 처리됩니다. React Query가 내부적으로 컨트롤러를 생성하고 중단합니다. 수동 데이터 요청 패턴보다 React Query를 선호하는 이유 중 하나입니다.

AbortController로 시간 초과 구현하기

AbortController와 setTimeout을 결합하여 요청 시간 초과를 구현하세요.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — 최신 방식의 간단한 사용법

최신 브라우저에서는 AbortSignal.timeout(ms)를 사용해 지정된 기간 후 자동으로 중단되는 신호를 만들 수 있으므로 수동 컨트롤러가 필요하지 않습니다.

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

React 18 Strict Mode에서 정리는 매우 중요합니다

React 18 Strict Mode는 개발 환경에서 효과를 두 번 실행합니다. AbortController를 사용한 정리가 없으면 데이터 요청이 두 번 실행되고 마운트 해제된 구성 요소의 상태와 관련된 경고가 발생할 수 있습니다. 정리 패턴을 사용하면 이 두 문제를 모두 방지할 수 있습니다.

빠른 확인

구성 요소가 다시 렌더링된 후 오래된 네트워크 응답이 상태를 업데이트하지 않도록 하려면 어떻게 해야 하나요?

복습: AbortController

효과마다 AbortController를 생성하세요. 신호를 데이터 가져오기 또는 axios에 전달하세요. 정리 함수에서 중단하세요. AbortError는 무시하세요. 예상된 동작입니다. 비동기 코드에서 setState를 호출하기 전에 signal.aborted를 사용하세요. 하나의 컨트롤러로 여러 요청을 취소할 수 있습니다. 시간 초과에는 AbortSignal.timeout()을 사용하세요. React Query가 이 모든 작업을 자동으로 처리합니다.

자주 묻는 질문

“정리를 위한 AbortController” 강의는 무료인가요?

네 — “정리를 위한 AbortController” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“정리를 위한 AbortController”에서 뭘 배우나요?

AbortController를 만들고 그 signal을 fetch에 전달하며, 마운트 해제된 컴포넌트의 상태 업데이트를 방지하도록 정리 함수에서 진행 중인 요청을 취소합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“정리를 위한 AbortController” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기