📁 파일 구조 예시

src/
├── api/
│   └── users.ts
├── components/
│   └── UserList.tsx
├── App.tsx

🔧 1단계: API 요청 함수 만들기

📄 src/api/users.ts

// 사용자 목록을 가져오는 함수 (GET 요청)
// axios를 사용하여 REST API 호출
import axios from 'axios';

// 사용자 데이터 타입 정의
export interface User {
  id: number;
  name: string;
  email: string;
}

// 사용자 목록을 가져오는 비동기 함수
export const fetchUsers = async (): Promise<User[]> => {
  const response = await axios.get('<https://jsonplaceholder.typicode.com/users>');
  return response.data;
};

💡 User 타입을 미리 정의함으로써, 타입스크립트 환경에서 자동완성과 타입 체크가 가능해집니다.

🧩 2단계: 컴포넌트에서 사용자 목록 불러오기

📄 src/components/UserList.tsx

import React, { useEffect, useState } from 'react';
import { fetchUsers, User } from '../api/users';

const UserList: React.FC = () => {
  // 사용자 목록 상태 선언
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true); // 로딩 상태
  const [error, setError] = useState<string | null>(null); // 에러 상태

  // 컴포넌트가 마운트되면 사용자 목록 가져오기
  useEffect(() => {
    const loadUsers = async () => {
      try {
        const data = await fetchUsers(); // API 호출
        setUsers(data); // 사용자 목록 상태에 저장
      } catch (err) {
        setError('사용자 정보를 불러오는데 실패했습니다.');
      } finally {
        setLoading(false); // 로딩 종료
      }
    };

    loadUsers();
  }, []);

  if (loading) return <p>⏳ 로딩 중...</p>;
  if (error) return <p>❌ {error}</p>;

  return (
    <div>
      <h2>👥 사용자 목록</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <strong>{user.name}</strong> ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

✅ useEffect를 사용해 컴포넌트가 처음 렌더링될 때만 fetchUsers를 실행합니다.

🧠 에러 처리, 로딩 처리 상태를 따로 관리해 사용자에게 UX를 제공합니다.

🧪 3단계: 앱에 컴포넌트 연결

📄 src/App.tsx

import React from 'react';
import UserList from './components/UserList';

const App: React.FC = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h1>📦 React REST API 예제</h1>
      <UserList />
    </div>
  );
};

export default App;

✅ 요약