React Router Dom - (1) 리액트 라우터 돔이란?(v6)

리액트 라우터 돔이란?

react-router-dom은 React 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 할 수 있도록 도와주는 라이브러리입니다

주로 SPA(Single Page Application)에서 URL에 따라 다른 컴포넌트를 렌더링할 때 사용됩니다.

 

주요특징

 

• 라우팅 설정: URL 경로에 따라 다른 컴포넌트를 보여줌
• 링크 이동: <Link> 컴포넌트로 새로고침 없이 페이지 이동 가능
• 매끄로운 페이지 이동: 다른 페이지로 이동할때 끊김없이 이동 가능
• 중첩 라우트: 라우트 안에 또 다른 라우트를 넣을 수 있음
• 동적 라우트: URL 파라미터를 이용한 동적 페이지 구현 가능 (/user/:id 등)
• 네비게이션 제어: useNavigate 훅으로 프로그래밍 방식의 이동 가능

 

 

기본 라우팅해보기

 

npm install react-router-dom

 

리액트 라우터돔 설치

 

리액트 라우터돔을 사용하기 위해서는 먼저 라우터를 만들어줘야합니다

 

리액트 라우터 돔이 제공하는 메서드인 createBrowserRouter를 이용해 라우터를 만들어줍니다

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import ProductPage from "./pages/Product";

const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/product", element: <ProductPage /> },
]);

function App() {
  return <RouterProvider router={router} />;
}

 

createBrowserRouter는 배열을 받습니다 배열안에 라우터를 정의하는 객체를 넣어주면 됩니다

 

path에는 라우팅할 URL을 지정합니다 여기서 '/'는 루트 페이지를 의미합니다

 

그리고 element에는 해당 라우트에서 렌더링할 컴포넌트를 넣어주면 됩니다

 

위의 코드에서는 루트 페이지에서는 HomePage 컴포넌트 

 

(루트페이지의url)/product 에서는 ProductPage 컴포넌트를 렌더링합니다

 

그다음 RouterProvider 를 import 해서 router props로 정의한 router를 넣어줍니다