react-router-dom개념 완벽이해

 

react-router-dom은 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위해 사용되는 라이브러리이다. 이 라이브러리를 사용하면 단일 페이지 애플리케이션(SPA)에서 페이지 이동을 쉽게 관리할 수 있다.

한마디로 페이지 전환을 위한 필수적인 패키지이다.

---

 

주요 개념

1. 라우팅(Routing)

사용자가 입력한 URL에 따라 적절한 React 컴포넌트를 렌더링 하는 작업을 말한다.

예를 들어, /home URL로 이동하면 Home컴포넌트가 렌더링 되고, /about URL로 이동하면 About 컴포넌트가 렌더링 된다.

 

2. SPA에서의 라우팅

React 애플리케이션은 SPA구조를 가지기 때문에 페이지 이동시 전체 페이지를 새로고침하지 않는다.

대신 URL만 변경하고 필요한 컴포넌트를 동적으로 렌더링 하여 빠른 사용자 경험을 제공한다.

---

주요 기능 및 컴포넌트

1. BrowserRouter

HTML5의 history API를 사용하여 URL을관리하는 컴포넌트이다.

라우팅의 최상위 컴포넌트로 사용된다.

 

2. Routes & Route

• Routes : 여러 개의 Route를 그룹으로 관리하는 컴포넌트이다.
• Route : 특정 URL에 맞는 컴포넌트를 정의한다.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

 

 

3. Link

SPA에서 페이지를 이동하기 위한 태그로, <a> 태그를 대체한다.

새로고침 없이 URL을 변경하고 필요한 컴포넌트를 렌더링 한다.

<Link to="/about">About</Link>

 

 

4. useNavigate

자바스크립트 코드에서 프로그래밍 방식으로 페이지를 이동하기 위해 사용된다.

const navigate = useNavigate();
navigate('/about');

 

 

5. useParams

URL에서 동적으로 전달되는 파라미터를 읽을 때 사용된다.

const { id } = useParams();
console.log(id); // URL이 "/user/123"일 때 "123"

 

---

 

설치 방법

npm install react-router-dom

---

간단한 예제

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

const Home = () => <h2>Home Page</h2>;
const About = () => <h2>About Page</h2>;

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

export default App;