React Router 사용해보기, Routing과 Client Side Routing?

Routing? url을 입력했을 때 url에 해당하는 정보를 가져다주는 것을 라우팅이라고 한다.

 

Client side routing - 서버에 요청하지 않아도 새로운  UI를 보여줄 수 있다. UI에 필요한 데이터를 동적으로 업데이트 할 수 있다. 빠른 사용자 경험을 제공해준다. 브라우저가 서버에게 새로운 페이지를 요청하고 응답받는 과정이 필요없다. 부분적인 UI를 업데이트해주면 된다. 

 

Nested Routes - 자식 url을 만들 수 있다.

 

https://reactrouter.com/en/main/start/overview

Feature Overview v6.20.1 | React Router

 

튜토리얼을 약간 정리해보자면 react router를 사용하기 위해서는 RouterProvider를 감싸주면 사용 가능하다.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

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

 

에러 페이지는 다음과 같이 정의해주면 해당하는 컴포넌트를 에러 페이지에 띄울 수 있다.

import ErrorPage from "./error-page";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
  },
]);

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

 

react router에서는 a태그와 비슷한 기능을 하는 Linke to를 제공한다.

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

export default function Root() {
  return (
    <>
      <div id="sidebar">
        {/* other elements */}

        <nav>
          <ul>
            <li>
              <Link to={`contacts/1`}>Your Name</Link>
            </li>
            <li>
              <Link to={`contacts/2`}>Your Friend</Link>
            </li>
          </ul>
        </nav>

        {/* other elements */}
      </div>
    </>
  );
}

 

/ 경로에서 /contact/:contactId 경로를 자식 요소로 두고 싶으면 아래와 같이 설정해준다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);

 

루트 컴포넌트에서 Outlet이라는 애를 넣어서 nav바 영역을 제외한 공간에서 내용이 변경되도록 만들 수 있다.

아래의 이미지에서 프로필이 띄워지는 영역에서 변동 사항이 발생한다. nav바 영역은 그대로 보여진다.

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

export default function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

 

다양한 기능이 많은데 공식 홈페이지의 Tutorial 보면서 따라해보면 위와 같은 프로필 관련 미니 프로젝트를 완성시킬 수 있다.

주요 기능은 포스팅에서 담아봤는데 이외에도 정말 많은 기능을 제공한다.

useNavigate(-1)등을 이용해서 뒤로 가기 기능도 사용할 수 있다.

생각보다 기능이 많아서 신기했다.

새로운 라이브러리 공부할 때 포스팅 남겨두면서 기록해야지!