19강. React Router로 페이지 전환

?1. 이번 강의에서 해결할 문제

출시 정보와 랭킹을 한 컴포넌트에 모두 넣으면 화면 책임이 흐려집니다. 새로고침 없이 페이지를 전환하면서도 URL로 현재 화면을 표현해야 합니다.

✓2. 학습 목표

• React Router를 설치하고 BrowserRouter를 연결한다.
• Routes와 Route로 URL별 페이지를 렌더링한다.
• Link와 NavLink로 접근 가능한 탐색을 만든다.

◇3. 핵심 개념

React Router에는 여러 사용 모드가 있습니다. 이 과정은 기존 Vite SPA에 가장 작은 단위로 붙이는 선언형 모드를 사용합니다. 2026년 7월 공식 설치 문서는 react-router 패키지와 BrowserRouter import를 안내합니다. 버전이 바뀔 수 있으므로 공식 설치 문서를 확인하세요.

a 태그는 전체 문서를 다시 요청하지만 Link는 클라이언트 라우팅으로 화면을 전환합니다. URL은 공유와 뒤로 가기를 가능하게 하는 앱 상태입니다.

</>4. 단계별 코드 예시

실행 위치: game-release-dashboard/

npm install react-router

파일 경로: game-release-dashboard/src/main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

파일 경로: game-release-dashboard/src/App.tsx

import { NavLink, Route, Routes } from 'react-router';
import { HomePage } from './pages/HomePage';
import { RankingsPage } from './pages/RankingsPage';

export default function App() {
  return (
    <>
      <header>
        <strong>Release Radar</strong>
        <nav aria-label="주요 메뉴">
          <NavLink to="/">출시 정보</NavLink>
          <NavLink to="/rankings">랭킹</NavLink>
        </nav>
      </header>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/rankings" element={<RankingsPage />} />
      </Routes>
    </>
  );
}

파일 경로: game-release-dashboard/src/pages/RankingsPage.tsx

export function RankingsPage() {
  return <main><h1>게임 랭킹</h1></main>;
}

→5. 코드가 동작하는 이유

BrowserRouter가 브라우저 history와 React를 연결합니다. Routes는 현재 URL과 일치하는 Route를 선택하고 element를 렌더링합니다. NavLink는 현재 경로일 때 활성 상태 정보를 제공해 메뉴 스타일을 구분할 수 있습니다.

!6. 자주 하는 실수와 해결법

• Router 밖에서 Link 사용: 앱 최상단을 BrowserRouter로 감쌉니다.
• 내부 이동에 일반 a 사용: 파일 다운로드나 외부 사이트가 아니라면 Link를 사용합니다.
• GitHub Pages에서 깊은 URL 새로고침 실패: 서버 rewrite를 설정하거나 정적 호스팅에서는 HashRouter를 선택하는 방안을 검토합니다.
• 예전 예제의 패키지명을 무조건 복사: 설치된 React Router 버전의 공식 문서를 기준으로 import를 맞춥니다.

✎7. 직접 실습

AboutPage와 /about 경로를 추가하세요. NavLink의 활성 상태에 aria-current="page"가 적용되는지 개발자 도구에서 확인하고 CSS로 강조하세요.

?8. 이해 점검 질문 3개

1. BrowserRouter는 브라우저의 어떤 기능과 React를 연결하나요?
2. Link와 일반 a 태그의 내부 페이지 이동 차이는 무엇인가요?
3. 정적 호스팅에서 깊은 URL 새로고침을 별도로 고려해야 하는 이유는 무엇인가요?

■9. 핵심 요약

라우터는 URL을 페이지 컴포넌트에 연결합니다. 이제 출시 정보와 랭킹이 독립된 주소와 화면을 가지며 브라우저 탐색도 자연스럽게 동작합니다.