Fetch API 실습편 [ 리액트 (React + Typescript) ]

Fetch API 기본 호출 구조

영상에서는 Photo 인터페이스를 먼저 정의하고, 앨범 ID, 타이틀, URL, 썸네일 URL 같은 필드를 명확히 적어뒀습니다. TypeScript를 쓰는 이유는 바로 이 부분 때문인데요. 응답 데이터가 어떤 형태로 올지 미리 알려주면 IDE 자동완성과 에러 체크가 훨씬 수월해지거든요. 실제로 인터페이스를 만들어두면 map으로 렌더링할 때 photo.title 같은 속성에 빨간줄이 뜨지 않아요.

컨테이너와 PhotoCard 컴포넌트를 간단히 스타일링한 뒤, fetch 함수를 호출하는 부분을 보면 응답을 json()으로 파싱한 다음 slice(0,4)로 4개만 잘라내는 로직이 들어 있습니다. 처음에는 전체 데이터를 다 보여주기보다는 이렇게 제한된 개수로 테스트하는 게 실수를 줄이는 데 좋습니다. 만약 10개로 바꾸고 싶다면 slice 숫자만 수정하면 바로 반영되죠.

비슷한 상황에서 axios를 쓰는 팀도 많지만, Fetch API는 브라우저 내장이라 별도 설치가 필요 없다는 장점이 있어요. 단, 에러 상태 코드(404, 500)를 자동으로 처리해주지 않기 때문에 response.ok 체크를 꼭 넣는 습관을 들이세요. 이렇게 기본 구조를 먼저 익혀두면 나중에 페이지네이션이나 무한스크롤로 확장할 때도 큰 어려움이 없습니다.

useEffect로 데이터 로딩하기

App 컴포넌트 안에서 useState로 photos 배열을 만들고, useEffect 안에 fetch를 넣는 패턴이 영상 핵심입니다. 의존성 배열을 빈 배열[]로 두면 컴포넌트가 처음 렌더링될 때 한 번만 실행되는데요. 이걸 놓치면 무한 루프가 발생할 수 있으니 주의해야 합니다.

async/await 방식으로 바꿔보면 가독성이 훨씬 좋아집니다. fetchPhotos라는 함수를 따로 빼서 async 키워드를 붙이고, await response.json() 다음에 setPhotos(data.slice(0,4))를 호출하는 구조예요. 화살표 함수를 선호하는 팀도 있고 function 선언식을 쓰는 팀도 있는데, 프로젝트 컨벤션에 맞추는 게 중요합니다.

실전 팁으로는 로딩 상태와 에러 상태를 함께 관리하는 겁니다. isLoading, error라는 state를 추가해서 fetch 전후에 값을 바꿔주면 사용자 경험이 좋아지죠. 데이터가 많을 때는 slice 대신 offset과 limit을 쿼리 파라미터로 넘겨 페이지네이션을 구현할 수도 있어요. 이렇게 하면 스크롤이 길어지는 문제를 자연스럽게 해결할 수 있습니다.

개발자 도구 확인과 StrictMode

네트워크 탭에서 실제 요청이 어떻게 나가는지 확인하는 방법도 영상에서 자세히 보여줍니다. Photo 메뉴를 클릭하면 GET 요청이 발생하고, Status Code 200과 응답 JSON을 바로 볼 수 있죠. Headers 탭에서 Content-Type이 application/json인지, Response Preview로 데이터가 제대로 왔는지 빠르게 검증할 수 있습니다.

한 가지 헷갈리는 부분이 React StrictMode 때문인데요. 개발 모드에서는 useEffect가 두 번 실행되는 현상이 나타납니다. index.tsx에 태그가 있어서 그런 거예요. 실제 배포 환경에서는 한 번만 실행되니 걱정할 필요는 없지만, 디버깅할 때는 StrictMode를 잠시 껐다 켜보면 호출 횟수를 정확히 확인할 수 있습니다.

에러가 발생했을 때는 catch 블록에서 console.error로 찍거나, 사용자에게 토스트 메시지를 보여주는 식으로 처리하세요. 나중에 Spring Boot 같은 백엔드와 연동할 때도 이 구조를 그대로 가져가면 됩니다. Fetch API 호출 패턴을 잘 익혀두면 React 프로젝트에서 데이터 연동이 훨씬 수월해질 거예요.