React 동적 라우팅에 관하여

우리가 사용하는 React는 SPA 기반으로 개발을 한다.

우리가 사용하는 html은 싱글 페이지이기 때문에 우리는 필연적으로 라우팅이 필요하다.

그리고 프로젝트가 점차 커지고 라우팅 패스가 하나 둘씩 많아 지게 되면, 자연스럽게 클라이언트 라우팅만을 담당하는 별도 컴포넌트 (가칭, Routes.js ) 를 생성하여 관리하게 될 것이다.

우리가 관리하게 되는 Routes.js 는 대략적인 모습으로

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Signin from "./pages/signin";
import Signup from "./pages/signup";
import Main from "./pages/index";
import NotFound from "./pages/NotFound";

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route exact path="/signin" component={Signin} />
        <Route exact path="/signup" component={Signup} />
        // ... 이 아래로 10여 개의 라우팅 패스가 추가로 정의되어 있다고 상상해 봅시다. 😰
        <Route path="/" component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

이러한 형태가 될텐데, 이러한 라우팅 설정은 라우팅해야할 path 가 몇개 되지 않을 때에는 불편함이 없지만, 그 수가 많아 지기 시작하면 금방 짜증이 밀려오게 된다.

라우팅 패스가 하나 추가될 때마다 매번 import 문을 추가해야 하고 또 라우팅 설정도 하나씩 추가해야 한다.

이러한 방법에 대해 공부하다가 알게된 lazy 와 Suspense 의 기능에 대해 소개해보려 한다.

이를 이용하면 pages 폴더의 파일 경로에 따라 그대로 라우팅이 되도록 구성하는 것이 가능하다.

예를 들자면,

import React, { Suspense, lazy } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

export default function DynamicRoutes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route
          path="/"
          render={({ history, location, match }) => {
            const Page = lazy(() =>
              import("./pages" + location.pathname).catch((e) => {
                if (/not find module/.test(e.message)) {
                  return import("./pages/NotFound.js");
                }
                if (/Loading chunk \d+ failed/.test(e.message)) {
                  window.location.reload();
                  return;
                }
                throw e;
              })
            );
            return (
              <Suspense fallback={<div>Loading..</div>}>
                <Page />
              </Suspense>
            );
          }}
        />
      </Switch>
    </BrowserRouter>
  );
}

이렇게 동적 라우팅을 이용하면 더 이상 라우팅 패스가 추가될 때마다 라우팅 설정을 수정할 필요가 없다. pages 폴더 구조 자체가 바로 라우팅 설정이 되는 것이기 때문에!

지금은 1차 프로젝트에 치여 살고 있기에 좀 더 정리가 되면 내용을 추가 해보도록 하겠다.