서버에서 데이터 가져오기 — 비동기의 세계

데이터 페칭(Data Fetching)은 서버(API)에서 데이터를 가져와 화면에 보여주는 일이에요. 상품 목록, 게시글, 날씨, 사용자 정보 — 화면에 보이는 대부분의 진짜 데이터는 우리 코드 안에 하드코딩된 게 아니라, 서버에 요청해서 받아온 것입니다.

데이터 요청은 렌더링 중에 하면 안 돼요. 화면이 그려질 때마다 요청이 나가버리니까요. 그래서 화면이 처음 나타난 뒤 딱 한 번 요청하도록, useEffect 안에서 요청을 보냅니다. 받은 결과는 state에 저장하고요.

import { useState, useEffect } from 'react';

function UserList() {
  const [data, setData] = useState(null);      // ① 데이터
  const [loading, setLoading] = useState(true); // ② 로딩
  const [error, setError] = useState(null);     // ③ 에러

  useEffect(() => {
    // 화면이 처음 뜬 뒤 한 번만 요청
    fetch('https://api.example.com/users')
      .then((res) => res.json())   // 응답을 JSON으로 변환
      .then((json) => setData(json)) // 데이터 state에 저장
      .catch((err) => setError(err)) // 실패하면 에러 저장
      .finally(() => setLoading(false)); // 성공이든 실패든 로딩 끝
  }, []); // 빈 배열 = 최초 1회만

  // ... 아래에서 loading / error / data 로 화면을 나눔
}

.then()을 계속 잇는 것도 되지만, async/await를 쓰면 코드가 동기 코드처럼 위에서 아래로 읽혀서 더 편해요. 에러는 try/catch로, 성공이든 실패든 마지막에 로딩을 끄는 건 finally로 처리합니다.

useEffect(() => {
  async function loadUsers() {
    try {
      setLoading(true);            // 요청 시작 → 로딩 켜기
      const res = await fetch('https://api.example.com/users');
      if (!res.ok) throw new Error('요청 실패: ' + res.status);
      const json = await res.json();
      setData(json);               // 성공 → 데이터 저장
    } catch (err) {
      setError(err);               // 실패 → 에러 저장
    } finally {
      setLoading(false);           // 끝나면 항상 로딩 끄기
    }
  }
  loadUsers();
}, []);

이제 loading, error, data 세 상태에 따라 서로 다른 화면을 보여주면 돼요. 흔히 이른 반환(early return)으로 위에서부터 순서대로 걸러냅니다.

function UserList() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => { /* ...위에서 본 요청 코드... */ }, []);

  if (loading) return <p>⏳ 불러오는 중...</p>;   // ① 로딩 화면
  if (error) return <p>⚠️ 에러: {error.message}</p>; // ② 에러 화면

  // ③ 성공 화면
  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// 상세 페이지: id가 바뀌면 그 id의 데이터를 다시 요청
useEffect(() => {
  fetch('https://api.example.com/users/' + id)
    .then((res) => res.json())
    .then(setData);
}, [id]); // ← id가 바뀔 때마다 재요청