react-router-dom을 사용하고 있지만 정확하게 모르고 사용하는 경우가 많아 이미 공부한 것과 새로운 기능들도 하나씩 다시 정리해보려고 한다

Feature Overview

Client Side Routing

React Router의 특징은 Client Side Routing을 가능하게 해준다는 점이다.

기존의 웹사이트에서는 브라우저가 웹 서버에 문서를 요청, CSS/JS 에셋을 다운로드 및 평가를 진행, 서버로부터 받은 HTML 문서를 렌더링하였으며, 사용자가 링크를 클릭할 때마다 앞의 모든 과정이 새로운 페이지에서 다시 진행되어야 했다.

Client Side Routing은 서버로의 요청이나 문서를 만들지 않고도 사용자가 링크를 클릭했을 때 앱의 URL이 업데이트 되도록 해준다. 앱은 즉시 새로운 UI를 렌더링할 수 있고, 'fetch'를 통해 페이지를 업데이트 하기 위한 데이터 요청을 할 수 있다.

Cilent Side Routing을 사용할 경우 기존 웹사이트 방식처럼 매 페이지마다 문서 요청, 에셋 다운로드/평가, HTML 렌더링 등의 과정을 반복하지 않아도 되므로, 사용자에게 더 빠른 사용 경험을 줄 수 있다. 또한, 이를 이용해 animation 같은 더 다이나믹한 경험도 전달할 수 있는 장점이 있다.

기본적으로 Client Side Routing을 구현하기 위해서는 아래와 같이 'Router'를 만들고, 'Link'와 'Form' tag를 이용해 페이지를 연결 및 submit 환경을 만들어줘야 한다.

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>,
  },
]); // router 라는 Browser Router를 생성

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} /> // 앱 렌더링 시 react router data API들을 동작하기 위한 모든 data router의 개체들을 전달
);

createBrowserRouter (react-router-dom v6.4)

React Router에서는 react router를 사용하는 모든 웹 프로젝트에는 create browser router를 사용하도록 권장한다. 이 라우터는 DOM History API를 이용해 URL을 업데이트하고 history stack을 관리한다.

path, element 등 URL 및 렌더링 컴포넌트의 정보 이외에도 react router data API(주로 loaders, actions, fetchers 등)를 동작하기 위한 요소들도 포함해 router를 생성할 수 있다.

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root"; // component, loader 정보를 가진 js 파일
import Team, { teamLoader } from "./routes/team"; // component, loader 정보를 가진 js 파일

const router = createBrowserRouter([
  {
    path: "/", // URL 정보
    element: <Root />, // 해당 URL에서 렌더링할 component 정보
    loader: rootLoader, // 해당 URL에서 사용할 loader(data API) 정보
    children: [ // nested router
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

loader, nested router 등은 별도 글로 작성

Type Declaration

function createBrowserRouter(
	routes: RouteObject[],
    opts?: {
    	basename?: string;
		future?: FutureConfig;
        hydrationData?: HydrationState;
		window?: Window;
	}
): RemixRouter;

routes

위 createBrowserRouter 예시 코드에서 작성했던 라우팅 정보 개체를 담은 array를 전달할 수 있다.

basename

도메인의 루트 디렉토리가 아닌 하위 디렉토리에 배포해야 하는 상황에서 라우팅 시 하위 디렉토리를 포함한 루트 디렉토리를 재지정해주는 속성이다.

github pages에 배포해야 하는 경우 호스팅 디렉토리가 https://githubid.github.io/repository 로 레파지토리 이름이 하위 디렉토리로 붙는 형태라서 basename을 지정해주지 않으면 제대로 라우팅이 되지 않는 문제가 있었다.

basename 지정 시 주의해야 할 것은 trailing slash(뒤에 붙이는 후행 슬래시)를 기입할 경우 slash까지 루트 디렉토리로 지정된다.

createBrowserRouter(routes, {
  basename: "/app",
});
<Link to="/" />; // results in <a href="/app" /> 


createBrowserRouter(routes, {
  basename: "/app/",
});
<Link to ="/" />; // results in <a href="/app/" />

future

이 라우터에서 사용할 미래 버전을 활성화하는 옵션이다. (현재는 v6.4)

아직 사용하는 옵션은 아니라 자세한 건 필요할 때 따로 학습할 예정이다.

const router = createBrowserRouter(routes, {
  future: {
    v7_normalizeFormMethod: true,
    // Normalize `useNavigate()`/`useFetcher()` `formMethod` to uppercase
  };
});

window

Browser devtool plugin이나 다른 윈도우 환경에서 테스트할 때 유용한 옵션이다.

아직 사용하는 옵션은 아니라 자세한 건 필요할 때 따로 학습할 예정이다.

Link

link tag는 내용이 많아 별도 블로그로 작성

RouterProvider

router provider는 모든 data router objects들을 렌더링 하고자 하는 앱과 data API 동작에 제공해주는 컴포넌트이다.

react router docs에 data router 라는 명확한 정의가 나와있지는 않은데 읽어 보면 browser router, hash router와 같은 제공하는 모든 라우터를 통칭하는 말 같다.

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

const router = createBrowserRouter(RouteObject[]);

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

fallbackElement

앱을 렌더링 하는 서버가 아닌 경우(정확하게 어떤 상황인지 이해하지 못함.. 나중에 정확하게 이해하게 되면 수정), createBrowserRouter는 마운팅될 때 모든 매칭된 로더를 시작하는데, 이 시간동안 사용자에게 대신 보여줄 수 있는 컴포넌트를 지정할 수 있는 옵션 속성이다.