axios로 API 호출

1️⃣ axios 설치

npm add axios

---

2️⃣ 사용자 타입 정의

// types/User.ts
export type User = {
    id: number;
    name: string;
    email: string;
};

---

3️⃣ API 호출 컴포넌트

// components/UserList.tsx
import { useEffect, useState } from "react";
import { User } from "../types/User";
import axios from "axios";

function UserList() {
    const [users, setUsers] = useState<User[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios.get<User[]>('https://jsonplaceholder.typicode.com/users')
        .then((res) => {
            setUsers(res.data);
            setLoading(false);
        })
        .catch((err) => {
            console.error('데이터 가져오기 실패: ', err);
            setLoading(false);
        });
    }, []);

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

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

export default UserList;

---

4️⃣ App.tsx 에서 호출

// App.tsx
import UserList from "./components/UserList";

function App() {
  return (
    <div>
      <h1>유저 리스트 페이지</h1>
      <UserList />
    </div>
  )
}

export default App;

---

---

🚀 핵심 정리

개념	설명
axios.get()	제네릭으로 응답 데이터 타입 지정
useEffect	컴포넌트가 처음 렌더링될 때 1번만 실행됨
useState	데이터 상태와 로딩 상태 관리
map()	리스트를 컴포넌트 배열로 렌더링