[ReactJS] React Router Dom 설치 및 사용하기

리액트 라우터(React Router)는 리액트 애플리케이션에서 페이지 간 이동을 관리하는 라이브러리이다. 리액트는 기본적으로 단일 페이지 애플리케이션(SPA) 구조로 동작하기 때문에, 페이지 내에서의 URL 변경을 브라우저의 기본 방식으로 처리하는 대신, 리액트 라우터를 사용해 URL을 제어한다.

리액트 라우터를 사용하면 애플리케이션 내에서 페이지 이동을 쉽게 할 수 있다.

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

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

export default App;

 

 

---

 

 

Router 주요 기능과 특징

URL 경로 매핑
URL을 특정 컴포넌트와 연결하여, URL이 변경되면 해당 컴포넌트를 렌더링한다. 예를 들어, /home 경로가 요청되면 Home 컴포넌트가 렌더링된다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />   {/* /home 경로에서 Home 컴포넌트 렌더링 */}
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

동적 라우팅
URL 경로에 따라 컴포넌트를 동적으로 렌더링할 수 있다. 예를 들어, /user/:id처럼 동적 파라미터를 사용하면 특정 id에 따라 다른 페이지를 렌더링할 수 있다.

import { useParams } from "react-router-dom";

function UserProfile() {
  const { id } = useParams();  // URL에서 id 값을 가져옴

  return <h2>사용자 ID: {id}</h2>;
}

<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
</Routes>

중첩 라우팅
하나의 컴포넌트 내에서 또 다른 라우터를 사용하여 중첩된 경로를 정의할 수 있다. 아래의 예시는 /dashboard/analytics로 이동하면 Dashboard 컴포넌트 안에 Analytics 컴포넌트가 렌더링되는 예시이다.

import { Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h2>대시보드</h2>
      <Outlet />  {/* 중첩 라우팅된 컴포넌트가 여기에 렌더링됨 */}
    </div>
  );
}

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

리디렉션
특정 조건에 따라 다른 경로로 리디렉션할 수 있다. 예를 들어, 로그인되지 않은 사용자가 특정 페이지에 접근하려고 할 때 로그인 페이지로 리디렉션할 수 있다. 아래의 예시는 로그인이 안 되어 있으면 /profile 경로로 가도 /login으로 리디렉션되는 코드이다.

import { Navigate } from "react-router-dom";

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

<Routes>
  <Route path="/profile" element={<ProtectedRoute isAuthenticated={user} ><Profile /></ProtectedRoute>} />
  <Route path="/login" element={<Login />} />
</Routes>

 

 

---

 

 

Router 구성 요소

• BrowserRouter: 브라우저의 URL을 사용하여 라우팅을 관리한다.
• Route: 경로와 컴포넌트를 매핑한다.
• Link: 페이지 이동을 위한 링크를 제공한다.
• Switch: 여러 Route 중 하나만 렌더링하도록 한다.
• useHistory, useLocation, useParams: 라우터 관련 정보를 훅으로 사용할 수 있다.

 

 

Router 사용방법

라우터를 사용하려면 React Router Dom을 설치해야한다.

npm install react-router-dom --save

 

 

설치가 완료되면 package.json에 정보가 들어온 것을 확인할 수 있다.