2026.03.30

[React 기초] API 데이터 가져오기

useEffect를 사용하여 API 데이터를 가져오고 화면에 출력하는 방법을 정리합니다.

api

fetch

react

react기초

useeffect

API 데이터 가져오기 🌐

React에서 데이터를 가져오는 작업은
매우 자주 사용됩니다.

예를 들어

code

게시글 목록
사용자 정보
상품 목록
댓글 목록

이러한 데이터는
보통 서버에서 가져옵니다.

React에서는
useEffect를 사용하여 API 데이터를 가져옵니다.

오늘 배울 내용 🎯

✔ API 데이터 가져오기
✔ fetch 사용 방법
✔ useEffect와 함께 사용
✔ 로딩 처리
✔ 에러 처리

주요 포인트 Top3

# API 호출 🌐

서버 데이터를 가져옵니다

# useEffect 사용 ⚡

렌더링 이후 실행합니다

# 상태 관리 📦

useState로 데이터 저장합니다

01. API 데이터 가져오기 기본 흐름 🧩

React에서 API 데이터를 가져오는 흐름은 다음과 같습니다.

code

useState 생성
↓
useEffect 실행
↓
API 호출
↓
데이터 저장
↓
화면 출력

이 흐름을 이해하는 것이 중요합니다.

02. 기본 구조 ⚙️

먼저 기본 구조를 보겠습니다.

jsx

import { useState, useEffect } from "react";
 
function App() {
  const [data, setData] = useState([]);
 
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
 
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

이 코드 흐름

code

컴포넌트 렌더링
↓
useEffect 실행
↓
API 호출
↓
데이터 저장
↓
화면 출력

03. useState로 데이터 저장하기 📦

먼저 데이터를 저장할 state를 만듭니다.

jsx

const [data, setData] = useState([]);

👉 API 데이터를 저장할 공간입니다.

04. useEffect에서 API 호출 ⚡

jsx

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
}, []);

👉 컴포넌트가 처음 렌더링될 때 실행됩니다.

05. 데이터 변환하기 🔄

fetch는 데이터를 바로 사용할 수 없습니다.

그래서 JSON으로 변환해야 합니다.

jsx

.then(res => res.json())

06. 데이터 저장하기 📥

jsx

.then(data => setData(data))

👉 데이터를 state에 저장합니다.

07. 데이터 출력하기 📺

jsx

{data.map(item => (
  <p key={item.id}>{item.title}</p>
))}

👉 map을 사용하여 화면에 출력합니다.

08. 로딩 처리하기 ⏳

데이터가 가져오기 전까지
로딩 화면을 보여줄 수 있습니다.

jsx

const [loading, setLoading] = useState(true);

jsx

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then(res => res.json())
    .then(data => {
      setData(data);
      setLoading(false);
    });
}, []);

jsx

if (loading) return <p>로딩중...</p>;

09. 에러 처리하기 ⚠️

에러 처리도 함께 하는 것이 좋습니다.

jsx

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

jsx

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then(res => res.json())
    .then(data => setData(data))
    .catch(err => setError(err));
}, []);

jsx

if (error) return <p>에러 발생</p>;

10. 최종 코드 🔥

jsx

import { useState, useEffect } from "react";
 
function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => setError(err));
  }, []);
 
  if (loading) return <p>로딩중...</p>;
  if (error) return <p>에러 발생</p>;
 
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

GOYO.’s Tip 💡

React에서 API 호출은
보통 useEffect 안에서 실행합니다.

그리고 실무에서는

code

loading
error
data

이 세 가지 상태를 함께 관리하는 것이 좋습니다.

이 패턴은 실무에서 매우 많이 사용됩니다.

마무리 🎯

이번 글에서는
API 데이터를 가져오는 방법을 알아봤습니다.

✔ useEffect 사용
✔ fetch 사용
✔ 데이터 저장
✔ 로딩 처리
✔ 에러 처리

다음 글에서는
Context API 상태 관리를 알아보겠습니다.

목록으로 가기

이전 클래스[React 기초] useEffect 사용하기 다음 클래스[React 기초] Context API 상태 관리

다음 클래스

react