React Router

React Router - 싱글 페이지 애플리케이션 라우팅

React Router 소개

React Router는 React 애플리케이션에서 라우팅(페이지 이동)을 구현하기 위한 표준 라이브러리입니다. 단일 페이지 애플리케이션(SPA)에서 여러 화면을 구현하고 URL 기반으로 컴포넌트를 렌더링할 수 있게 해줍니다.

React Router의 주요 기능

• URL에 따른 컴포넌트 렌더링
• 브라우저 히스토리를 활용한 내비게이션
• 중첩 라우트 지원
• 동적 경로 매개변수
• 쿼리 매개변수 처리
• 프로그래밍 방식의 내비게이션
• 라우트 가드(보호된 라우트)

React Router 설치

React Router는 npm이나 yarn을 통해 설치할 수 있습니다:

npm install react-router-dom

또는

yarn add react-router-dom

기본 사용법

React Router v6를 기준으로 설명합니다(최신 버전).

1. 라우터 설정

먼저, 애플리케이션 최상위 컴포넌트에서 라우터를 설정합니다:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

2. 라우트 정의

App.js 파일에서 라우트를 정의합니다:

// src/App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import ProductDetail from './pages/ProductDetail';
import NotFound from './pages/NotFound';
import Layout from './components/Layout';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="products" element={<Products />} />
        <Route path="products/:id" element={<ProductDetail />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

export default App;

3. 레이아웃 컴포넌트 생성

공통 레이아웃(예: 헤더, 푸터)을 위한 컴포넌트를 생성합니다:

// src/components/Layout.js
import React from 'react';
import { Outlet, Link } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>
        <nav>
          <ul>
            <li><Link to="/">홈</Link></li>
            <li><Link to="/about">소개</Link></li>
            <li><Link to="/products">제품</Link></li>
          </ul>
        </nav>
      </header>
      
      <main>
        {/* 중첩된 라우트의 컴포넌트가 여기에 렌더링됨 */}
        <Outlet />
      </main>
      
      <footer>
        <p>© 2025 My React App</p>
      </footer>
    </div>
  );
}

export default Layout;

4. 페이지 컴포넌트 구현

각 페이지에 해당하는 컴포넌트를 구현합니다:

// src/pages/Home.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1>홈페이지</h1>
      <p>React Router를 이용한 홈페이지입니다.</p>
    </div>
  );
}

export default Home;

// src/pages/About.js
import React from 'react';

function About() {
  return (
    <div>
      <h1>소개 페이지</h1>
      <p>회사 소개 내용이 들어갑니다.</p>
    </div>
  );
}

export default About;

// src/pages/Products.js
import React from 'react';
import { Link } from 'react-router-dom';

function Products() {
  const products = [
    { id: 1, name: '제품 1' },
    { id: 2, name: '제품 2' },
    { id: 3, name: '제품 3' },
  ];

  return (
    <div>
      <h1>제품 목록</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <Link to={`/products/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Products;

// src/pages/ProductDetail.js
import React from 'react';
import { useParams, useNavigate } from 'react-router-dom';

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

  // 실제 애플리케이션에서는 ID를 기반으로 제품 데이터를 가져옴
  const product = {
    id,
    name: `제품 ${id}`,
    description: `제품 ${id}에 대한 상세 설명입니다.`
  };

  return (
    <div>
      <h1>{product.name} 상세 정보</h1>
      <p>{product.description}</p>
      <button onClick={() => navigate(-1)}>뒤로 가기</button>
      <button onClick={() => navigate('/products')}>제품 목록으로</button>
    </div>
  );
}

export default ProductDetail;

// src/pages/NotFound.js
import React from 'react';
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div>
      <h1>404 - 페이지를 찾을 수 없습니다</h1>
      <p>요청하신 페이지가 존재하지 않습니다.</p>
      <Link to="/">홈으로 돌아가기</Link>
    </div>
  );
}

export default NotFound;