React Router

---

🧭 React Router란?

정의

React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리다.

페이지를 새로고침하지 않고 URL에 따라 화면을 바꾸는 데 사용한다.

🧩 주요 특징

• SPA에서 페이지 전환처럼 동작한다.
• 브라우저 새로고침 없이 화면을 바꿀 수 있다.
• URL과 화면 구조를 분리해서 관리할 수 있다.
• 중첩 라우팅과 동적 라우팅을 지원한다.

🛠️ 설치

npm install react-router-dom

⚙️ 기본 설정

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

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

🔁 페이지 이동

Link

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

function Menu() {
  return <Link to="/about">About</Link>;
}

useNavigate

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

function Home() {
  const navigate = useNavigate();

  return <button onClick={() => navigate("/about")}>Go to About</button>;
}

🧱 중첩 라우팅

• 부모 라우트 안에 자식 라우트를 배치할 수 있다.
• 공통 레이아웃과 상세 화면을 분리하기 좋다.

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

function Layout() {
  return (
    <>
      <header>Header</header>
      <main>
        <Outlet />
      </main>
    </>
  );
}

⚖️ 장점과 단점

장점

• 페이지 이동이 자연스럽다.
• SPA 구조와 잘 맞는다.
• URL 기반 화면 관리가 쉬워진다.

단점

• 초기 설정이 필요하다.
• 중첩 라우팅이나 동적 라우팅은 구조를 잘 잡아야 한다.

📌 정리

• React Router는 React에서 화면 전환을 다루는 기본 도구다.
• BrowserRouter, Routes, Route, Link, useNavigate를 먼저 익히면 된다.
• 레이아웃이 있는 페이지는 Outlet까지 함께 보면 좋다.

---

연결문서

• React-Component
• React-JSX
• React-EventHandler
• React-Props