로딩·실패·성공 상태와 오래된 요청 취소를 처리합니다.
Effect에서 AbortController를 만들고 정리 시 취소하면 화면이 바뀐 뒤 늦게 온 응답이 이전 상태를 덮는 일을 줄일 수 있습니다.
response.ok와 응답 구조를 확인하고 오류, 빈 데이터, 재시도 UI를 분리합니다.
서버 데이터 캐시가 필요하면 검증된 라이브러리나 프레임워크 기능으로 중복 요청과 재검증을 관리합니다.
fetch가 resolve됐다는 이유만으로 404와 500을 성공 처리하지 마세요.
로컬 프로젝트에서 확인해보세요다시 시도 버튼과 실패 상태를 추가하세요.
import { useEffect, useState } from "react";
export default function App() {
const [course, setCourse] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
const controller = new AbortController();
fetch('data:application/json,{"title":"React 실무","lessons":18}', {
signal: controller.signal,
})
.then((r) => {
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then(setCourse)
.catch((e) => {
if (e.name !== "AbortError") setError(e.message);
});
return () => controller.abort();
}, []);
return (
<main>
{error ? (
<p role="alert">{error}</p>
) : course ? (
<h1>
{course.title}: {course.lessons}강
</h1>
) : (
<p>불러오는 중...</p>
)}
</main>
);
}