12강. API 요청과 fetch

?1. 이번 강의에서 해결할 문제

게임 배열이 소스 코드에 고정되어 있어 데이터를 수정할 때마다 앱을 고쳐야 합니다. HTTP로 JSON 데이터를 받아 화면에 표시합니다.

✓2. 학습 목표

• fetch의 Promise와 Response 흐름을 설명한다.
• HTTP 상태를 확인한 뒤 JSON을 읽는다.
• Effect cleanup에서 진행 중 요청을 취소한다.

◇3. 핵심 개념

fetch는 요청 후 Response로 이행되는 Promise를 반환합니다. 404나 500 응답만으로 Promise가 거부되지는 않으므로 response.ok를 직접 확인해야 합니다. response.json()도 비동기입니다.

학습 중에는 API 키 없이 재현할 수 있도록 public/data/games.json을 같은 출처의 GET API처럼 사용합니다. Vite의 BASE_URL을 붙이면 하위 경로 배포에서도 주소가 맞습니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/public/data/games.json

[
  {"id":"star-harbor","title":"Star Harbor","platform":"PC","score":94},
  {"id":"tiny-forge","title":"Tiny Forge","platform":"Console","score":88}
]

파일 경로: game-release-dashboard/src/App.tsx

import { useEffect, useState } from 'react';

type Game = {
  id: string;
  title: string;
  platform: string;
  score: number;
};

function App() {
  const [games, setGames] = useState<Game[]>([]);

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

    async function loadGames() {
      const url = import.meta.env.BASE_URL + 'data/games.json';
      const response = await fetch(url, { signal: controller.signal });

      if (!response.ok) {
        throw new Error('게임 요청 실패: ' + response.status);
      }

      const data: Game[] = await response.json();
      setGames(data);
    }

    void loadGames();
    return () => controller.abort();
  }, []);

  return <p>받은 게임: {games.length}개</p>;
}

export default App;

→5. 코드가 동작하는 이유

빈 의존성 배열의 Effect가 마운트 후 요청을 시작합니다. await는 Response와 JSON 변환을 순서대로 기다립니다. 정상 데이터가 state에 저장되면 화면이 다시 렌더링됩니다. 제거된 컴포넌트의 요청은 AbortController가 취소합니다.

!6. 자주 하는 실수와 해결법

• response.ok 확인 생략: HTTP 오류도 성공 흐름처럼 처리됩니다. JSON을 읽기 전에 검사합니다.
• JSON 파일의 잘못된 쉼표·따옴표: JSON은 주석과 마지막 쉼표를 허용하지 않습니다.
• /data/games.json 고정: 하위 경로 배포에서는 BASE_URL을 붙입니다.
• Effect 콜백 자체를 async로 작성: 내부 async 함수를 만들고 Effect는 cleanup 함수만 반환하게 합니다.

✎7. 직접 실습

JSON에 releaseDate와 genre를 추가하고 Game 타입 및 카드 출력을 함께 갱신하세요. URL을 잠시 틀리게 바꿔 response.ok 분기가 실행되는지도 콘솔에서 확인하세요.

?8. 이해 점검 질문 3개

1. fetch가 404에서 자동으로 reject되지 않는다는 것은 무엇을 의미하나요?
2. response.json() 앞에서 response.ok를 확인하는 이유는 무엇인가요?
3. AbortController는 어떤 문제를 줄이나요?

■9. 핵심 요약

fetch는 요청, 상태 확인, 본문 변환의 순서로 다룹니다. 이제 대시보드는 코드 밖의 JSON 데이터를 비동기로 읽을 수 있습니다.