🚦 API 통신 모듈 구성과 React 라우팅 패턴

프론트엔드에서 API와 통신하는 일은 매우 흔하지만, 코드의 유지보수성과 가독성을 위해 구조화된 흐름이 중요하다. 오늘은 React 프로젝트에서 API 통신을 어떻게 모듈화하면 좋은지, 그리고 React에서 라우팅을 어떻게 설정하는지를 정리해본다.

---

🌐 API 통신 모듈 구성하기

✅ API 요청 흐름

View (Header.tsx)
    ↓
Hooks (useCategory.ts)
    ↓
Query Library (예: react-query, tanstack-query) [Optional]
    ↓
Fetcher (category.api.ts → http.ts)
    ↓
API Server

📁 디렉토리 구조 예시

src/
 ├── components/
 ├── hooks/
 │    └── useCategory.ts
 ├── api/
 │    ├── category.api.ts
 │    └── http.ts
 └── pages/

📌 모듈별 역할 정리

• View (Header.tsx)
  → UI에서 실제 데이터를 요청하는 시작점. useCategory 같은 커스텀 훅을 호출한다.

• Hooks (useCategory.ts)
  → API 호출 로직을 캡슐화하여 재사용 가능하게 만든다. useEffect, useQuery 등을 활용.

• Fetcher (category.api.ts)
  → 특정 API에 대한 요청 로직을 담당한다. 요청 경로, 파라미터, 응답 타입 지정 등을 포함.

• 공통 Fetcher (http.ts)
  → axios 인스턴스를 생성하고, 기본 헤더 설정, 인터셉터 등을 설정하는 공통 모듈.

🧱 코드 예시

// hooks/useCategory.ts
import { useEffect, useState } from "react";
import { getCategory } from "../api/category.api";

export const useCategory = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    getCategory().then(setData);
  }, []);

  return data;
};

// api/category.api.ts
import { http } from './http';

export const getCategory = () => {
  return http.get('/category');
};

// api/http.ts
import axios from 'axios';

export const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

---

🧭 React 라우팅 작성 방법

React Router를 통해 SPA(single-page application)에서 페이지 전환을 매끄럽게 구현할 수 있다.

🗂 기본 구조

// App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

🧾 라우팅 관련 꿀팁

• useNavigate()로 프로그래밍 방식으로 이동 가능
• 동적 라우팅 (예: /post/:id) 도 쉽게 설정
• 중첩 라우트(Nested Routes)를 활용하면 레이아웃 공유가 쉬움
• Outlet 컴포넌트로 자식 라우트를 표시

---

🔨 TIL

• API 통신은 View → Hooks → API module → Fetcher → Server 순으로 구성하면 추적이 쉽고 재사용성이 높다.
• axios 인스턴스를 따로 분리하면 헤더, 인터셉터 설정이 훨씬 간편하다.
• React 라우팅은 BrowserRouter, Routes, Route로 구성하며, 컴포넌트 기반 라우팅이 가능해 직관적이다.
• react-router-dom의 기능을 잘 이해하고 활용하면 동적 라우팅과 중첩 레이아웃 구성도 쉽게 구현할 수 있다.