React

useEffect를 이용한 데이터 가져오기

비동기 처리 기술을 활용해 리액트 컴포넌트 내부에서 데이터를 가져오는(Data Fetching) 방법을 알아보겠습니다. 리액트에서 컴포넌트가 마운트되거나 업데이트될 때 외부 데이터를 가져와야 하는 경우가 많습니다.

기본 Fetch API 사용 예제와 App.js에 추가를 중심으로 useEffect를 이용한 데이터 가져오기의 판단 흐름을 읽습니다.

핵심 흐름

1

useEffect 훅 복습

useEffect 훅은 함수 컴포넌트 내에서 부수 효과(Side Effects)를 수행할 수 있게 해줍니다.

2

데이터 페칭의 기본 원리

데이터 페칭은 대표적인 비동기 부수 효과입니다.

3

실제 예제: 사용자 목록 가져오기

로컬 Mock API(json-server, http://localhost:4000)를 사용하여 사용자 목록을 가져오는 컴포넌트를 만들어 봅시다.

4

async/await 사용 시 주의사항

useEffect 훅에 전달되는 함수는 동기 함수여야 합니다.