통합 요약노트
Ch.18 API 연동 — fetch와 데이터 흐름
REST API, async/await, React 데이터 페칭, 실전 앱
이 챕터의 내용
API란? — 프론트와 백의 대화
API — 프론트엔드가 백엔드에 데이터를 요청하고 받아오는 약속된 규칙입니다.
레스토랑의 웨이터가 바로 API입니다
4가지 동작, 3가지 결과 HTTP의 핵심 약속
API가 주고받는 데이터 JSON 형식으로 통일됩니다
fetch와 async/await
비동기(async) — 데이터를 기다리는 동안 다른 작업을 계속 수행하는 방식입니다.
카페에서 주문 후 자리에서 기다리기 vs 진동벨
fetch() — 브라우저 내장 API 호출 함수
.then 지옥 탈출 async/await로 깔끔하게
React에서 API 호출하기
useEffect — 컴포넌트가 마운트된 후 실행되는 훅으로, API 호출의 최적 타이밍입니다.
화면이 뜬 직후 데이터를 가져오는 useEffect + fetch 패턴
데이터가 올 때까지 로딩 중을 보여줘야 합니다
배열 데이터를 map()으로 화면에 뿌립니다
실전 — 날씨 앱 만들기
실전 조립 — 검색 → fetch → 상태 관리 → 화면 표시까지 전체 흐름을 완성합니다.
연습용 공개 API 무료로 바로 사용 가능합니다
사용자 입력 → fetch → 결과 표시 완전한 흐름을 구현합니다
로딩 스피너, 에러 메시지, 빈 상태 3가지 UX를 챙깁니다
핵심 용어 모음
GET
데이터 조회 (Read) — 목록 가져오기, 상세 보기
POST
데이터 생성 (Create) — 새 글 작성, 회원가입
PUT
데이터 수정 (Update) — 프로필 편집, 글 수정
DELETE
데이터 삭제 (Delete) — 글 삭제, 계정 탈퇴
200 OK
요청 성공! 데이터를 정상적으로 받음
201 Created
새 데이터 생성 성공 (POST 응답)
404 Not Found
요청한 리소스가 존재하지 않음
500 Server Error
서버 내부 오류 (백엔드 문제)
fetch(url)
서버에 HTTP 요청 전송 → Promise 반환
response.json()
응답 본문을 JSON으로 파싱 → Promise 반환
.catch()
네트워크 에러, 파싱 실패 등 처리
loading
true면 로딩 UI, false면 데이터/에러 표시
비교 정리
| 항목 | 동기 (Sync) | 비동기 (Async) |
|---|---|---|
| 비유 | 줄 서서 기다리기 — 내 차례가 올 때까지 아무것도 못 함 | 진동벨 받고 자리에 앉아 다른 일 하기 — 벨 울리면 가져옴 |
| 코드 동작 | 한 줄씩 순서대로 실행, 이전 줄 끝나야 다음 줄 시작 | 시간 걸리는 작업은 백그라운드, 끝나면 결과 받아서 처리 |
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기