본문으로 건너뛰기
Advertisement

React: 데이터 페칭 (Step 3)

1. 리액트에서 데이터 가져오기​

리액트 컴포넌트에서 외부 API 데이터를 가져올 때는 주로 fetch API나 axios 라이브러리를 사용하며, 이 로직은 보통 useEffect 내부에서 수행됩니다.

2. useEffect를 이용한 기본 페칭​

컴포넌트가 마운트될 때 데이터를 한 번만 가져오는 예시입니다.

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, []); // 빈 배열: 마운트 시 1회 실행

  if (loading) return <div>로딩 중...</div>;
  return <h1>Happy coding, {user.name}!</h1>;
}

3. 로딩 및 에러 상태 처리​

사용자 경험(UX)을 위해 로딩 중임을 알리고, 네트워크 오류 등에 대한 예외 처리가 필수적입니다.

const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error('데이터를 가져오지 못했습니다.');
      const result = await res.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
  fetchData();
}, [url]);

4. 현대적인 대안: TanStack Query (React Query)​

실무에서는 캐싱, 자동 재요청, 상태 관리 기능이 포함된 React Query 와 같은 라이브러리를 많이 사용합니다.

// React Query 예제 (개념)
const { data, isLoading } = useQuery(['user'], fetchUser);
Advertisement
Advertisement