Router(라우터)

1. React Router란?

정의

SPA(Single Page Application)에서 화면 전환 시 새로고침 없이 컴포넌트만 교체할 수 있도록 지원하는 라이브러리

특징

• 브라우저의 주소(URL)와 컴포넌트를 연결
• 실제 페이지 이동 없이, 가상의 경로(Virtual URL) 기반으로 동작
• 사용자 경험(UX) 개선: 빠른 화면 전환 가능

2. 설치 & 기본 설정

1) 설치

npm i react-router-dom

2) Root 컴포넌트 설정

보통 main.jsx에서 전체 앱을 로 감싸야 라우터 기능이 동작

import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
<BrowserRouter>
  <App />
</BrowserRouter>
);

3) Routes & Route 정의

App.jsx에서 가상 URL ↔ 컴포넌트 연결

import { Routes, Route } from "react-router-dom";
import Home from "./Home.jsx";
import About from "./About.jsx";
import NotFound from "./NotFound.jsx";

export default function App() {
return (
  <Routes>
    {/* 기본 라우팅 */}
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />

    {/* 예외 처리 (없는 주소) */}
    <Route path="*" element={<NotFound />} />

    {/* Path 매개변수 방식 */}
    <Route path="/user/:userId" element={<UserDetail />} />
  </Routes>
);
}

4) 라우팅 이동 방법

- 링크 이동

<a> 대신 <Link> 사용 → 새로고침 없이 이동

import { Link } from "react-router-dom";
<Link to="/about">About 페이지</Link>

- 자바스크립트로 이동

useNavigate() Hook 사용

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
navigate("/about");

5) URL 매개변수 받기

- QueryString 방식

• ?key=value 형태

import { useSearchParams } from "react-router-dom";
const [searchParams] = useSearchParams();
const keyword = searchParams.get("q"); // /search?q=리액트

Path 방식

• /:변수명 형태

import { useParams } from "react-router-dom";
const { userId } = useParams(); // /user/10 → userId = 10