📘 리액트 강의 6편 - useEffect로 외부 데이터 가져오기

이번 강의에서는 리액트 컴포넌트에서 외부 API를 호출하고 데이터를 가져오는 방법을 배웁니다.
React에서는 이런 "사이드 이펙트(side effect)" 작업을 useEffect라는 훅으로 처리합니다.

---

1. useEffect란?

• 컴포넌트가 렌더링된 후 실행되는 함수
• 대표적인 사용 사례:
  • API 요청
  • 타이머 설정
  • 구독/클린업 작업 등

기본 형태

useEffect(() => {
  // 실행할 작업
}, []);

[]는 의존성 배열이며, 비워두면 처음 렌더링 시 1회만 실행됩니다.

---

2. API 호출을 위한 준비

우리는 fetch 또는 axios를 사용할 수 있습니다.
이 예제에서는 기본 내장 fetch를 사용합니다.

---

3. 예제: JSONPlaceholder에서 게시글 불러오기

📄 App.js

import { useState, useEffect } from "react";

function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

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

  return (

📮 최신 게시글

{loading ? (

로딩 중...

) : (

{posts.map((post) => (
• {post.title}{post.body}
))}

)}

  );
}

export default App;

---

사용된 API

• 주소: https://jsonplaceholder.typicode.com/posts
• _limit=5 → 상위 5개만 가져옴

---

4. 예제 설명

• 컴포넌트가 처음 렌더링되면 useEffect 내부 코드가 실행
• fetch로 데이터 요청 → 받아오면 setPosts로 상태 변경
• loading 상태를 이용해 로딩 중 메시지와 실제 데이터 출력 분기

---

5. 추가 팁: 에러 처리 & async 함수

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch("...");
      const data = await res.json();
      setPosts(data);
    } catch (e) {
      console.error("에러 발생", e);
    } finally {
      setLoading(false);
    }
  };

  fetchData();
}, []);

fetch를 async/await으로 처리하면 더 깔끔합니다.