React Router (react-router-dom)

 

🟡 React Router (react-router-dom)

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

react-router-dom은 이를 웹 브라우저 환경에서 사용할 수 있도록 제공하는 패키지.

 

◼️ 주요 특징

1️⃣ URL에 따른 화면 렌더링 (Routing)

URL 경로에 따라 서로 다른 React 컴포넌트를 화면에 표시할 수 있다.

<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />

• 예를 들어 /about, /products와 같은 경로에 접근하면 설정된 컴포넌트를 렌더링한다.

 

2️⃣ 동적 URL 처리 (URL Parameters)

URL에 값을 포함하여 하나의 컴포넌트로 여러 페이지를 처리할 수 있다.

<Route path="/products/:id" element={<ProductDetail />} />

/products/1
/products/2
/products/3

• :id는 동적 URL 파라미터이며, useParams()를 통해 값을 가져올 수 있다.
  
  • 예: const { id } = useParams();

 

3️⃣ 페이지 이동 (Navigation)

페이지 전체를 새로고침하지 않고 다른 경로로 이동할 수 있다.

• <Link> 컴포넌트: HTML의 <a> 태그처럼 이동하면서도 SPA 방식의 빠른 화면 전환이 가능하다.

 

4️⃣ 중첩 라우팅 (Nested Routing)

부모 라우트 안에 자식 라우트를 구성하여 복잡한 화면 구조를 관리할 수 있다.

예를 들어 /dashboard/profile처럼 하나의 페이지 내부에서 여러 하위 페이지를 구성할 때 사용한다.

Outlet을 통해 중첩된 라우트의 컴포넌트가 렌더링된다.

 

◼️ 주요 컴포넌트

🔹 BrowserRouter

애플리케이션 전체를 감싸는 가장 기본적인 라우터이다.

HTML5 History API(pushState, replaceState)를 사용하여 URL을 변경하고, 페이지를 새로고침하지 않고도 화면을 전환하며 브라우저의 뒤로가기·앞으로가기 기능을 지원한다.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 라우팅 관련 컴포넌트들이 여기에 위치합니다 */}
    </BrowserRouter>
  );
}

 

🔹 Routes / Route

Routes는 여러 Route를 관리하며, 현재 URL과 일치하는 Route를 찾아 해당 Route의 element를 렌더링한다.

Route는 특정 URL 경로와 렌더링할 컴포넌트를 연결한다. 

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

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

 

🔹 Link

일반적인 <a> 태그처럼 이동 기능을 제공하지만, React Router가 URL을 변경하고 필요한 컴포넌트만 렌더링하므로 페이지 전체가 새로고침되지 않는다.

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

function Navigation() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
      <Link to="/contact">연락처</Link>
    </nav>
  );
}

 

🔹 NavLink

내부적으로 Link를 기반으로 동작하며, 현재 URL과 일치하는 경우 isActive 값을 제공한다.

이를 활용하여 활성 메뉴 스타일을 쉽게 적용할 수 있다.

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/" 
        style={({ isActive }) => isActive ? { color: 'red' } : undefined}
      >
        홈
      </NavLink>
      <NavLink 
        to="/about"
        className={({ isActive }) => isActive ? 'active-link' : ''}
      >
        소개
      </NavLink>
    </nav>
  );
}

 

🔹 HashRouter (선택)

URL에 #을 포함하는 방식으로 동작하기 때문에 서버의 별도 라우팅 설정이 필요하지 않다.

서버에서 URL 재작성(Rewrite) 설정을 할 수 있는 환경이라면 일반적으로 BrowserRouter 사용이 권장된다.

import { HashRouter } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      {/* 라우팅 관련 컴포넌트들이 여기에 위치합니다 */}
    </HashRouter>
  );
}

• BrowserRouter: https://example.com/about
• HashRouter: https://example.com/#/about

 

🔹 Outlet

부모 라우트에서 중첩된(자식) 라우트가 렌더링될 위치를 지정하는 컴포넌트이다.

공통 레이아웃(Header, Sidebar 등)을 유지하면서 내부 화면만 변경할 때 사용한다.

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* 중첩된 라우트들 */}
        <Route index element={<DashboardHome />} />
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

// Dashboard 컴포넌트 내에서 Outlet을 사용하여 중첩 라우트 렌더링
function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>
      <nav>
        <Link to="/dashboard">홈</Link>
        <Link to="/dashboard/profile">프로필</Link>
        <Link to="/dashboard/settings">설정</Link>
      </nav>
      <Outlet /> {/* 중첩된 라우트가 여기에 렌더링됩니다 */}
    </div>
  );
}

 

🔹 useNavigate (프로그래밍 방식 이동)

사용자의 이벤트나 특정 로직 실행 후 원하는 경로로 이동해야 할 때 사용한다.

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

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

  const handleLogin = () => {
    // 로그인 성공
    navigate("/dashboard");
  };

  return (
    <button onClick={handleLogin}>
      로그인
    </button>
  );
}

• useNavigate는 이벤트 발생 후 코드에서 원하는 경로로 이동해야 할 때 사용한다.

 

🔹 useParams (동적 URL 값 가져오기)

Route에서 정의한 URL 파라미터 값을 객체 형태로 반환한다.

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

function ProductDetail() {
  const { id } = useParams();

  return (
    <h1>
      상품 번호 : {id}
    </h1>
  );
}

/* URL - /products/10, 결과 - 상품 번호 : 10 */

• useParams() 사용 순서:
  1. useParams를 import한다.
  2. useParams()를 호출하여 변수에 저장한다.
  3. Route의 path에 /:변수명을 작성한다.
  4. 저장한 변수를 원하는 곳에서 사용한다.

 

🌟 팁: 404 페이지 처리 추가 🌟

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="*" element={<NotFound />} />
</Routes>

• * 경로는 정의되지 않은 모든 URL을 처리하며, 일반적으로 Not Found 페이지 구현에 사용한다.
  • 실제 프로젝트에서는 거의 필수.
  • 반드시 마지막에 작성하는 것이 일반적.

 

 

📋 React Router DOM 주요 컴포넌트 📋

컴포넌트	역할
BrowserRouter	History API 기반으로 URL과 UI를 연결하는 기본 라우터
Routes	현재 URL과 일치하는 Route를 관리
Route	URL 경로와 컴포넌트를 연결
Link	새로고침 없이 페이지 이동
NavLink	현재 활성화된 링크에 스타일 적용
Outlet	중첩 라우트 컴포넌트를 렌더링하는 위치
HashRouter	# 기반으로 라우팅하며 정적 호스팅 환경에서 사용

 

📋 Hooks 주요 API 📋

API	역할
useParams	URL 파라미터 값 가져오기
useNavigate	코드로 페이지 이동
useLocation	현재 URL 정보 확인
useSearchParams	Query String 관리
useOutletContext	부모 Outlet에서 전달한 데이터 사용

 

---

 

🔗 React Router DOM 설치 방법 🔗

https://reactrouter.com/

 

https://reactrouter.com/tutorials/quickstart

 

terminal

npm install react-router-dom

 

https://reactrouter.com/api/components/Link

 

https://reactrouter.com/api/components/Links

 

https://reactrouter.com/api/components/NavLink

 

https://reactrouter.com/api/components/Route

 

https://reactrouter.com/api/components/Routes

 

https://reactrouter.com/api/hooks/useParams