react-router-dom

React 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리 중 하나이다. 웹 애플리케이션에서 라우팅이랑 사용자가 어플리케이션 내의 다양한 경로(URL)을 통해 서로 다른 뷰나 페이지를 볼 수 있게 하는 기능을 말한다. react-router-dom은 싱글 페이지 애플리케이션(SPA)에서 이러한 라우팅을 쉽게 구현할 수 있게 도와주며, 사용자가 다양한 페이지를 빠르게 전환할 수 있도록 해준다.

주요 컴포넌트

1. BrowserRouter

   HTML5의 hitory API 를 사용해 UI를 URL에 동기화시키는 라우터이다. 대부분의 웹 애플리케이션에서 이 컴포넌트를 사용해 라우팅을 설정한다.

2. Routes

   애플리케이션 내의 다양한 경로(Route)를 정의하는 컨테이너 역할을 한다. React Router v6 부터는 Switch 대신 Routes를 사용한다.

3. Route

   특정 URL 에 매칭될 때만 렌더링할 컴포넌트를 정의한다. 각 Route에는 path 속성으로 경로를, element 속성으로 렌더링할 컴포넌트를 지정한다.

4. Link

   사용자가 다른 경로로 이동할 수 있게 하는 링크를 생성한다. a 태그와 유사하지만, 페이지를 새로 불러오지 않고 애플리케이션 내에서 뷰를 전환한다.

5. NavLink

   Link 와 비슷하지만, 현재 경로와 매칭될 때 스타일이나 클래스를 추가할 수 있어 현재 위치를 시각적으로 나타내는 데 유용하다.

예시

import React from "react";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

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

특징

• 동적 라우팅
  react-router-dom은 런타임에 라우팅을 처리한다. 이는 애플리케이션의 라우팅 구조를 유연하게 변경할 수 있음을 의미한다.

• 중첩 라우팅
  여러 레벨의 경로를 쉽게 정의할 수 있어, 애플리케이션의 복잡한 계층 구조를 관리하기에 적합하다.

• 페이지 리로드 없는 빠른 페이지 전환
  SPA의 특성상 페이지 전환 시 전체 페이지를 새로 불러오지 않아 빠른 사용자 경험을 제공한다.

react-router-dom 은 React 개발자들 사이에서 광범위하게 사용되며, SPA 의 라우팅 요구사항을 효과적으로 해결해준다.