React Router

핵심 개념

Route

특정 URL 경로와 그에 대응하는 컴포넌트를 매핑하는 단위입니다. 경로 패턴과 렌더링할 컴포넌트를 정의합니다.

Router

라우팅 기능을 제공하는 최상위 컨텍스트 컴포넌트입니다. BrowserRouter, HashRouter 등 환경에 따라 다른 구현체를 선택할 수 있습니다.

Link

페이지 새로고침 없이 URL을 변경하고 다른 라우트로 이동하게 해주는 컴포넌트입니다. HTML의 <a> 태그를 대체하여 SPA 내비게이션을 구현합니다.

Nested Routes

라우트 안에 또 다른 라우트를 정의하여 레이아웃과 하위 페이지를 계층적으로 구성하는 패턴입니다. 공통 레이아웃을 유지하면서 일부 영역만 교체할 수 있습니다.

Dynamic Segment

URL 경로에 변수를 포함시키는 기능으로, /user/:id 같은 패턴으로 동적인 경로를 정의합니다. useParams 같은 훅으로 경로 파라미터 값을 읽을 수 있습니다.

Navigation Hook

useNavigate, useLocation 등 라우팅 상태를 읽거나 프로그래밍 방식으로 페이지를 이동할 수 있게 해주는 React Hook들입니다.

기본적인 라우트 설정

세 개의 라우트를 정의하고, Link로 페이지 간 이동을 구현한 예시입니다. /user/:id는 동적 경로로 useParams를 통해 파라미터를 읽습니다.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
        <Link to="/user/123">사용자</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

function User() {
  const { id } = useParams(); // URL에서 :id 값 추출
  return <div>사용자 ID: {id}</div>;
}