API 호출 디렉토리 분리하기

실무에서는 axios.get(...) 같은 호출을 컴포넌트 안에 쓰지 않고 별도 디렉토리를 만들어서 API 요청만 따로 관리

• 코드 재사용이 쉬움
• 유지보수 편함

---

📂 구조 예시

src
├─ services
│  └─ userService.ts   ✅ API 요청 담당
├─ types
│  └─ User.ts          ✅ 타입 정의
├─ pages
│  └─ userPage.tsx     ✅ 실제 화면

---

1️⃣ 타입 정의

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

---

2️⃣ API 요청 모듈

// services/userService.ts
import axios from "axios";
import { User } from "../types/User";

const BASE_URL = 'https://jsonplaceholder.typicode.com';

export const userService = {
    async getAll(): Promise<User[]> {
        const res = await axios.get(`${BASE_URL}/users`);
        return res.data;
    },

    async getById(id: number): Promise<User> {
        const res = await axios.get(`${BASE_URL}/users/${id}`);
        return res.data;
    }
};

---

3️⃣ API 호출해서 화면에 보여주기

// pages/UserPage.tsx
import { useEffect, useState } from "react";
import { User } from "../types/User";
import { userService } from "../services/userServices";

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

    useEffect(() => {
        userService.getAll()
        .then(data => {
            setUsers(data);
            setLoading(false);
        })
        .catch(err => {
            console.error('에러 발생', err);
            setLoading(false);
        });
    }, []);

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

    return (
        <div>
            <h2>유저 목록</h2>
            <ul>
                {users.map(u => (
                    <li key={u.id}>
                        {u.name} - {u.email}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default UserPage;

---

4️⃣ App.tsx 에서 호출

// App.tsx
import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";
import Header from "./components/Header";
import UserPage from "./pages/UserPage";

function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/user" element={<UserPage />} />
      </Routes>
    </>
  );
}

export default App;