3관문. AbortController

관문 3 / 7

컴포넌트가 언마운트되거나 userId가 바뀔 때 진행 중인 fetch 요청을 실제로 취소하라.

📖 이론 비급

AbortController: 진짜 요청 취소

ignore 플래그는 결과를 무시할 뿐 네트워크 요청은 계속 진행된다. AbortController를 사용하면 브라우저 레벨에서 요청 자체를 취소할 수 있다.

const controller = new AbortController(); fetch(url, { signal: controller.signal }) cleanup에서 controller.abort()를 호출하면 fetch가 AbortError를 던지며 즉시 중단된다.

⚔️ 수련 코드

import { useState, useEffect } from 'react';

export default function PostDetail({ postId }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    // TODO: AbortController를 생성하고 fetch에 signal을 전달하라
    // cleanup에서 controller.abort()를 호출하라
    // AbortError는 catch에서 무시하라 (정상 취소이므로)
    fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
      .then(r => r.json())
      .then(data => setPost(data));
  }, [postId]);

  return <p>{post?.title ?? '로딩 중...'}</p>;
}

Open Sandbox