react
CHAPTER 28 / 34
읽기 약 2분
FUNCTION
React로 데이터 페칭 구현
핵심 개념
useEffect에서 fetch API로 데이터를 가져옵니다. useState로 data, loading, error 3가지 상태를 관리합니다. 클린업 함수로 언마운트 시 요청을 취소합니다. 페칭 로직을 지우며 데이터 통신이 어떻게 끊기는지 확인하십시오.
코드 분석
const { useState, useEffect } = React;
function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let cancelled = false;
setLoading(true);
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(r => r.json())
.then(d => { if (!cancelled) { setData(d); setLoading(false); } })
.catch(e => { if (!cancelled) { setError(e.message); setLoading(false); } });
return () => { cancelled = true; };
}, []);
if (loading) return <div style={{color:'#f59e0b'}}>DOWNLOADING DATA...</div>;
if (error) return <div style={{color:'#10b981'}}>ERROR: {error}</div>;
return (
<div>
<div style={{color:'#22c55e', marginBottom:'4px', fontSize:'11px'}}>[DATA RECEIVED]</div>
<div style={{color:'#10b981', marginBottom:'4px'}}>ID: {data.id}</div>
<div style={{color:'#888', fontSize:'11px'}}>{data.title}</div>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<DataFetcher />);AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 React '데이터 페칭' 컴포넌트에서 불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고 최적화 코드로 리팩토링해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'데이터 페칭'를 사용한 실전 컴포넌트를 TypeScript + Tailwind 포함 완성 코드로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 React '데이터 페칭' 사용 패턴 전체를 분석하고 번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을 우선순위로 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
React '데이터 페칭' vs 다른 프레임워크(Vue/Svelte/Solid)의 동일 기능 구현 방식을 솔직하게 비교하고 2026년 트렌드를 알려줘.
⭐ 이것만 기억하세요
React로 데이터 페칭 구현은 이 3가지만 확실히 잡으세요
1.useEffect 안에서 fetch만 호출하면 로딩 상태·에러 처리·경쟁 조건(race condition)을 전부 놓칩니다
2.loading·data·error 세 상태를 관리하고, cleanup에서 AbortController로 이전 요청을 취소하는 것이 안전한 패턴입니다
3.다음 챕터에서 상태 변화를 시각적으로 부드럽게 전달하는 애니메이션을 구현합니다
공유하기
진행도 28 / 34