react-router는 URL 경로와 컴포넌트를 매핑하여 동적 라우팅을 지원합니다. 이 패키지는 라우팅의 기본 기능을 제공하며, 경로에 따라 서로 다른 컴포넌트를 렌더링할 수 있습니다. 또한, 중첩 라우팅, 동적 경로 매칭, 프로그래밍 방식으로 라우팅 등을 지원합니다.

react-router-dom은 react-router의 브라우저 환경에 최적화된 구현으로, DOM에 특화된 컴포넌트와 훅을 제공합니다. 이 패키지는 브라우저의 히스토리 API를 활용하여 페이지 새로 고침 없이 URL을 변경하고, 링크 클릭 시 부드러운 전환을 제공합니다. 또한, 브라우저 전용 기능(예: <Link>, <NavLink>, <BrowserRouter>)을 추가로 제공하여 웹 애플리케이션에서 라우팅을 쉽게 구현할 수 있습니다.

react-router는 브라우저, 리액트 네이티브 등 다양한 환경에서 사용할 수 있는 범용 라우팅 라이브러리입니다. 이 패키지는 DOM에 의존하지 않기 때문에, 브라우저 외의 환경에서도 라우팅 기능을 구현할 수 있습니다.

react-router-dom은 브라우저 환경에 최적화된 라우팅 라이브러리로, 브라우저의 히스토리 API와 DOM 요소를 활용하여 라우팅을 구현합니다. 이 패키지는 웹 애플리케이션에 특화된 기능을 제공하며, 브라우저에서만 사용할 수 있습니다.

react-router는 라우팅을 위한 기본 컴포넌트(예: <Route>, <Switch>, <Redirect>)를 제공합니다. 이 컴포넌트들은 URL 경로에 따라 서로 다른 컴포넌트를 렌더링하는 데 사용됩니다. 또한, 중첩 라우팅, 동적 경로 매칭, 프로그래밍 방식으로 라우팅 등을 지원합니다.

react-router-dom은 react-router의 브라우저 환경에 최적화된 컴포넌트를 제공합니다. 이 패키지는 브라우저 전용 컴포넌트(예: <Link>, <NavLink>, <BrowserRouter>)를 추가로 제공하여, 웹 애플리케이션에서 라우팅을 쉽게 구현할 수 있습니다. 특히, <Link>와 <NavLink> 컴포넌트는 URL을 변경하고, 스타일링 및 활성 상태 관리를 쉽게 할 수 있도록 도와줍니다.

react-router는 라우팅을 위한 기본 훅(예: useRouteMatch, useParams, useLocation)을 제공합니다. 이 훅들은 현재 라우트 정보에 접근하고, 동적 경로 매개변수, URL 쿼리, 위치 정보 등을 쉽게 가져오는 데 사용됩니다.

react-router-dom은 react-router의 브라우저 환경에 최적화된 훅을 제공합니다. 이 패키지는 브라우저 전용 훅(예: useHistory, useLinkClickHandler, useNavigate)을 추가로 제공하여, 브라우저의 히스토리 API와 DOM 요소를 활용한 라우팅을 쉽게 구현할 수 있습니다. 특히, useHistory 훅은 프로그래밍 방식으로 히스토리를 조작하고, useNavigate 훅은 간편하게 페이지를 이동할 수 있도록 도와줍니다.

리액트 라우터 예제

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h2>홈</h2>;
const About = () => <h2>소개</h2>;
const NotFound = () => <h2>페이지를 찾을 수 없습니다.</h2>;

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

리액트 라우터 DOM 예제

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>홈</h2>;
const About = () => <h2>소개</h2>;
const NotFound = () => <h2>페이지를 찾을 수 없습니다.</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">홈</Link></li>
          <li><Link to="/about">소개</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;