React Router

개요

• 단일 페이지 애플리케이션(SPA, Single Page Application)에서 페이지 간의 이동을 관리하는 라이브러리.
• 페이지 리로딩 없이 URL을 변경하고 그에 따라 적절한 컴포넌트를 렌더링할 수 있다.
• Router를 사용하기 위해서는 npm install react-router-dom 명령어를 통해 라이브러리 설치해야함.

---

주요 개념

Route

각각의 URL에 매핑되는 컴포넌트를 정의.
사용자가 특정 URL로 접근하면 해당 URL에 맞는 컴포넌트를 렌더링.

Routes

여러 Route를 감싸는 컨테이너.
여러 Route를 정의해 다양한 URL 패턴을 처리.

---

예시 코드

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h1>홈 페이지</h1>;
}

function About() {
  return <h1>소개 페이지</h1>;
}

function NotFound() {
  return <h1>404 - 페이지를 찾을 수 없습니다.</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />   {/* 홈 페이지 */}
        <Route path="/about" element={<About />} />  {/* 소개 페이지 */}
        <Route path="*" element={<NotFound />} />  {/* 존재하지 않는 페이지 */}
      </Routes>
    </Router>
  );
}

export default App;

코드 설명

<Router>

애플리케이션 전체를 감싸는 라우터
브라우저의 URL 변경을 감지하고 해당하는 컴포넌트를 렌더링하는 역할.

<Routes>

여러 개의 Route를 감싸서 관리하는 컴포넌트.
Route들이 순서대로 URL을 확인하고 해당하는 컴포넌트를 렌더링.

<Route>

각 Route는 특정 경로(path)에 매핑.
예를 들어, path="/"는 기본 경로(홈 페이지)를 나타내고,
path="/about"은 /about 경로에 해당하는 컴포넌트를 나타냄.

<Route path="*">

와일드카드(*)를 사용하여 정의되지 않은 경로에 대해 처리 가능.
즉, 존재하지 않는 페이지로 이동했을 때 NotFound 컴포넌트를 렌더링.

이렇게 설정하면,
브라우저의 주소창에서 /로 접근하면 Home 컴포넌트, /about으로 접근하면 About 컴포넌트가 렌더링.
만약 존재하지 않는 경로로 접근하면 NotFound 컴포넌트가 렌더링.