[React]Page Routing(v6.4)

🤔Routing이란?

어떤 네트워크 내에서 통신 데이터를 보낸 경로를 선택하는 일련의 과정 - 위키백과

Router: 데이터의 경로를 실시간으로 지정해주는 역할을  하는 무언가 즉, 길잡이의 역할을 한다.

Routing: 경로를 정해주는 행위와 그런 과정들을 다 포함하여 일컫는 말이다.

 

🤔Page Routing이란?

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 할 수 있다.

요청(Request)에 명시된 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정 자체를 Page Routing이라 한다.

👉 MPA와 SPA, SSR과 CSR

리액트와 같은 경우 단일 페이지로 구성되는 SPA 방식을 따르며 CSR으로 페이지를 렌더링 한다.

✅ React Router

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. 클라이언트 측 라우팅을 가능하게 해준다. 기존 웹사이트는 사용자가 링크를 클릭하면 새 페이지에 대한 렌더링 프로세스가 처음부터 다시 시작됐다. 클라이언트 사이드 라우팅을 사용하면, 앱이 서버에서 다른 문서를 요청하지 않고 링크 클릭에서 URL을 업데이트할 수 있다. 대신, 즉시 새로운 UI를 렌더링하고 새로운 정보로 페이지에 보여지기 위해 데이터를 요청할 수 있다. 

 

브라우저가 완전히 새로운 문서를 요청하거나 다음 페이지를 위해 CSS, JS를 재평가할 필요가 없기 때문에 애니메이션과 같이 동적이고 빠른 사용자 경험을 가능하게 한다. 

2021년 11월 React Router는 V5 -> V6로 업데이트되었다. v6.4가 되면서 data fetching과 data submission이 더욱 간소화 됨.

 

React Router 공식 문서를 기반으로 작성해보자.  👉 React Router 공식 문서

설치

npm install react-router-dom

OR

yarn add react-router-dom

🟡 라우터 종류

v6.4에서 지원하는 라우터는 세가지가 있다. 이 중 하나를 사용하여 앱을 구현해야 한다.

createBrowserRouter   createMemoryRouter   createHashRouter

🟢 createBrowserRouter

모든 React Router web 프로젝트에서 권장되는 라우터이다. DOM History API를 사용하여 URL을 업데이트하고 History stack을 관리한다. 또한 loaders, actions, fetchers 등과 같은 v6.4 데이터 api를 사용할 수 있다.

 

👊 튜토리얼

import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";

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

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

path 프로퍼티인 경로는 해당 경로의 내부에서 자식들이 렌더링되기 때문에 루트 경로라고 한다. 이것은 UI의 루트 레이아웃 역할을 하며, 중첩된 레이아웃을 가진다. 해당 경로에 어떤 요소가 나타날 것인지 element에 명시해주었다. 컴포넌트를 element로 설정하여 컴포넌트 자체를 렌더링한다. 

 

😅 NotFound Error 페이지 처리

새 앱을 빌드할 때 많은 버그가 발생할 수 있기에 오류에 어떻게 대응하는지 아는 것은 좋다.

오류에 대한 처리를 구현시켜서 사용자에게 좋은 경험 뿐만 아니라 개발 중에도 도움이 된다.

 

App.js

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

errorElement - loaders, actions나 컴포넌트 렌더링에서 예외가 발생할 때 Routes로 설정한 일반적인 렌더 경로가(<Route Element>) 아닌 에러 경로(<Route errorElement>)가 렌더될 것이다. 

 

에러 반환 컴포넌트

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

export default function ErrorPage() {
  const error = useRouteError();
  console.error(error);

  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>Sorry, an unexpected error has occurred.</p>
      <p>
        <i>{error.statusText || error.message}</i>
      </p>
    </div>
  );
}

useRouteError - errorElement로 사용된 컴포넌트 내부에서 사용되는 이 훅은 actions, loaders 또는 렌더링 중에 발생한 모든 것을 반환한다.

👌 중첩 경로

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

새로운 path를 설정하고 contacts/1로 경로에 진입하면 문제 없이 출력된다. 하지만 Root 경로의 내용을 없어지게 된다. 해당 내용을 Root경로의 내용과 함께 출력하고 싶다면, children을 사용하여 해당 경로를 Root의 자식으로 넣어야 한다.

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

Root는 정상적으로 출력되지만 자식은 출력되지 않는다. 자식 경로를 렌더링할 위치를 루트 경로에 알려주어야 한다. 

이 역할을 <Outlet />이 한다. 하위 경로 요소를 렌더링하려면 상위 경로 요소에서 <Outlet>을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다. 상위 경로가 정확히 일치하면 하위 index 경로를 렌더링하거나 index 경로가 없으면 아무것도 렌더링하지 않는다.

  // root.jsx
  <div id="detail">
    <Outlet />
  </div>

<Link> - 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소

Link를 사용하여 클라이언트 사이드 라우팅을 사용할 수 있다. 앱이 서버에서 다른 문서를 요청하지 않고도 URL을 업데이트할 수 있다.