데이터 fetch - API 호출과 로딩/에러 처리
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. fetch API에서 HTTP 404 응답을 받았을 때의 동작은?
💡 fetch는 네트워크 에러에서만 reject됩니다. 4xx, 5xx HTTP 에러에서는 Promise가 resolve되지만 response.ok가 false입니다. 따라서 반드시 if (!response.ok) throw new Error() 체크를 해야 합니다.
Q2. 데이터 패칭 시 '로딩 중' 상태를 관리하기 위한 올바른 패턴은?
💡 finally 블록은 try/catch 결과에 상관없이 항상 실행됩니다. 따라서 성공하든 실패하든 setLoading(false)를 보장하려면 finally에서 호출해야 합니다.
Q3. Race Condition을 방지하는 방법으로 올바른 것은?
💡 Race Condition은 이전 요청이 나중 요청보다 늦게 도착할 때 발생합니다. cancelled 플래그를 사용하거나 AbortController.abort()로 이전 요청을 취소하면 방지할 수 있습니다.
Q4. 특정 userId가 바뀔 때마다 해당 사용자 데이터를 다시 불러오려면?
💡 useEffect의 의존성 배열에 userId를 넣으면 userId가 변경될 때마다 effect가 재실행됩니다. 빈 배열은 마운트 시에만 실행되고, 배열 없음은 매 렌더링마다 실행됩니다.
Q5. useEffect 내에서 async/await를 사용하는 올바른 방법은?
💡 useEffect의 콜백은 async 함수가 되면 안 됩니다(Promise를 반환하면 cleanup으로 인식). 대신 내부에서 async 함수를 정의하고 즉시 호출하는 IIFE 패턴을 사용합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.