✅ React 기초 강좌

🎯 학습 목표

🧪 우리가 사용할 예시 API

JSONPlaceholder의 간단한 더미 API:

https://jsonplaceholder.typicode.com/posts?_limit=5

👉 게시글 5개를 JSON 형식으로 반환합니다.

📁 구성 예시

src/
├── components/
│   └── PostList.jsx
├── App.jsx

📄 1. PostList.jsx

import { useEffect, useState } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);        // 데이터
  const [loading, setLoading] = useState(true);  // 로딩 상태
  const [error, setError] = useState(null);      // 에러 처리

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then((res) => {
        if (!res.ok) throw new Error('네트워크 오류 발생');
        return res.json();
      })
      .then((data) => setPosts(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>로딩 중...</p>;
  if (error) return <p>에러: {error}</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <strong>{post.title}</strong>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

export default PostList;

📄 2. App.jsx

import PostList from './components/PostList';

function App() {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>📰 외부 데이터 패칭 예제</h1>
      <PostList />
    </div>
  );
}

export default App;

✅ 실행 결과

• 앱이 처음 로드될 때 fetch()로 게시글 5개를 불러옴
• 로딩 중에는 로딩 중... 표시
• 데이터가 도착하면 ul 목록으로 출력

📌 확장 아이디어

✍️ 과제

1. API 주소를 바꿔서 사용자 목록 (/users) 또는 댓글 목록 (/comments) 불러오기
2. useFetch라는 커스텀 훅을 만들어 재사용 가능하게 만들기
3. 버튼 클릭 시 API를 호출하고 결과를 표시하는 방식으로 바꿔보기