React - Router

React Router로 페이지 전환 구현

React는 하나의 HTML에서 모든 화면을 관리하는 SPA(Single Page Application)입니다.
이런 구조에서는 브라우저 주소(URL)에 따라 화면을 전환할 수 있도록 라우팅(Routing) 기능이 필요합니다.
React Router는 이를 위한 공식 라이브러리로, 이번 글에서는 React Router의 개념과 실제 적용 방법을 정리합니다.

React Router란?

React Router는 브라우저 주소에 따라 특정 컴포넌트를 렌더링할 수 있게 해주는 라우팅 라이브러리입니다.
전체 페이지를 새로고침하지 않고도 화면 전환을 자연스럽게 구현할 수 있도록 도와줍니다.

설치 방법

npm install react-router-dom

※ 설치 후 모든 라우팅 기능은 react-router-dom에서 import하여 사용합니다.

주요 컴포넌트

• BrowserRouter: 라우팅 기능을 감싸는 컨테이너
• Routes: 여러 개의 Route를 묶는 컴포넌트
• Route: 경로(path)에 컴포넌트를 연결
• Link: 페이지 이동을 위한 컴포넌트 (a 태그 대체)
• useParams(): URL 파라미터 값을 추출하는 Hook

App.jsx - 전체 라우팅 구성

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Regist from './event/Regist';
import List from './event/List';
import Detail from './event/Detail';

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/regist">등록</Link></li>
        <li><Link to="/list">목록조회</Link></li>
      </ul>

      <Routes>
        <Route path="/regist" element={} />
        <Route path="/list" element={} />
        <Route path="/detail/:event_id" element={} />
      </Routes>
    </BrowserRouter>
  );
}

※ BrowserRouter는 반드시 전체를 감싸야 하고, 내부에 Routes와 Route를 통해 경로별 화면을 정의합니다.
※ Link를 사용하면 새로고침 없이 페이지 전환이 가능하며, :event_id는 동적 파라미터입니다.

List.jsx - 이벤트 목록에서 상세 페이지로 이동

import { useEffect, useState } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

function List() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8000/events/")
      .then((res) => setEvents(res.data));
  }, []);

  return (
    <ul>
      {events.map(event => (
        <li key={event.id}>
          <Link to={`/detail/${event.id}`}>{event.title}</Link>
        </li>
      ))}
    </ul>
  );
}

※ <Link to={`/detail/${event.id}`}>는 각 항목마다 고유 경로를 생성해 상세 페이지로 이동할 수 있게 합니다.
※ 해당 경로는 /detail/1, /detail/2처럼 ID 값을 포함합니다.

Detail.jsx - 상세 정보 확인

import { useParams } from 'react-router-dom';
import axios from 'axios';
import { useEffect, useState } from 'react';

function Detail() {
  const { event_id } = useParams(); // 주소에서 event_id 추출
  const [event, setEvent] = useState(null);

  useEffect(() => {
    axios.get(`http://localhost:8000/events/${event_id}`)
      .then((res) => setEvent(res.data))
      .catch((err) => console.error(err));
  }, [event_id]);

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

  return (
    <div>
      <h2>{event.title}</h2>
      <p>설명: {event.description}</p>
      <p>장소: {event.location}</p>
    </div>
  );
}

※ useParams()를 사용하면 URL에 포함된 :event_id 값을 받아올 수 있습니다.
※ 해당 값을 기반으로 백엔드에 요청을 보내 상세 데이터를 가져옵니다.

에러 발생 시 자주 확인할 것

• Link is not defined: import { Link } 누락
• 라우팅 경로 오타: :event_id 대신 :evnet_id처럼 오타 시 useParams 값이 undefined
• FastAPI에서 422 에러: /events/undefined 요청 시 → 파라미터 값이 잘못된 경우

요약

• BrowserRouter로 라우팅 기능 감싸기
• Link를 사용해 새로고침 없이 이동
• Route path="/..."에 따라 컴포넌트 렌더링
• useParams()로 동적 URL 값 추출
• FastAPI 등 백엔드와 연동 시 URL 파라미터를 정확히 전달해야 함