[React] React Router란

React Router

create-react-app을 통한 리액트 프로젝트를 작업하면서 가장 먼저 접하는 파일은 아마 App 파일이 아닐까싶다. 

App 파일에는 대부분 라우트 작업을 다루고 있으며 라우트의 짝꿍 라우터에 대해 자세히 공부해보자.

 

개발을 하면서 가장 먼저 확인해야할 것은 바로 공식 문서다.

 

Client Side Routing

React Router enables "client side routing"

• 리액트 라우터는 "클라리언트 사이드 라우팅"을 가능하게 한다. 사용자가 URL을 직접 입력하거나 클릭했을 때 서버에 요청을 보내지 않고 리액트 앱이 업데이트를 해준다.
• 브라우저가 URL에 대한 새로운 document를 요청하여 새로운 페이지를 렌더링하는 것이 아니기에 더욱 역동적인 UI를 가능하게 해준다는 특징이 있다.
• 라우팅에는 Router와 Link 등과 같은 키워드를 사용할 수 있다.

import React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

 

 

Nested Routes

중첩 라우트는 nested는 상속 개념이 담겨있는 라우트 구조이다.

상위 라우트의 path 아래서 라우트가 렌더링되며 부모 Route가 렌더링하는 컴포넌트에서 자식 Route들의 path와 element를 작성해준다.

 

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