메티의 블로그

React 프로젝트에서도 Next.js 처럼 디렉터리 기반 라우팅을 해주는 vite 플러그인(vite-plugin-pages)이 있어서 사용하고 적용해보게 되었습니다. 예전 Next.js 처럼 디렉터리 기반 라우팅 적용이며, layout, page 와 같은 최신 Next.js 같은 방식으로는 아직 적용하지 않았습니다.

개요

제가 next.js 에서 가장 편하다고 생각하는 기능은 디렉터리 기반 라우팅입니다. 이번에 팀 내에서 새로 시작하는 프로젝트는 next.js 를 사용하지 않습니다. 그래서 혹시나 하는 마음에 vite 플러그인 중에서 디렉터리 기반 라우팅 해주는걸 분명 누가 만들지 않았을까 싶어서 찾아봤는데, 아니나 다를까 있었습니다! 적용도 간단하고, 편해서 정리하게 되었습니다.

vite-plugin-pages

해당 플러그인 이름은 vite-plugin-pages 입니다. vue 플러그인으로 먼저 나와서 그런지 react 쪽은 기능이 조금 적습니다. 이 플러그인은 react-router-dom 과 같이 사용해야하며, 아주 약간의 보일러 플레이트가 있습니다.

Vite config


import { defineConfig } from "vite";
import Pages from "vite-plugin-pages";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
    Pages({
      dirs: "src/pages",
    }),
  ],
});

다음과 같은 Pages 객체를 통해 여러 옵션을 추가할 수 있습니다. dirs 는 vite-plugin-pages 가 바라볼 엔트리포인트 설정이라고 보면 됩니다.

vite-env.d.ts


declare module "virtual:generated-pages-react" {
  import { RouteObject } from "react-router-dom";
  const routes: RouteObject[];
  export default routes;
}

다음과 같이 module 또한 작성해줍니다.

App 컴포넌트와 첫 index.html


// App.tsx

import { useRoutes } from "react-router-dom";
import { Suspense } from "react";
import routes from "virtual:generated-pages-react";

function App() {
  return <Suspense fallback={<p>Loading...</p>}>{useRoutes(routes)}</Suspense>;
}

export default App;

프로젝트에 따라 조금씩 다를 수 있겠지만, 다음과 같이 빌드 후 생성되는 routes 를 넘겨주는 방식으로 보일러플레이트 설정을 합니다.


// main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

적용 후 사용

next.js 14 버전 처럼의 layout.tsx 등의 지원은 react 쪽에서는 안 되는 것 같았고, 기본적인 pages 하위 라우팅과 path param 적용 정도 까지 되는 것 같습니다.

React 프로젝트에서 디렉터리 기반 라우팅 적용

개요

vite-plugin-pages

적용 후 사용

B2B 커머스 앱 프론트엔드 1인 개발 후기

프로젝트 별 node 버전 관리 방법 (NVM, .nvmrc)

react-hook-form 간단 가이드

TanStack Query 간단 가이드

textarea 입력 3줄 까지만 늘어나게 하기

useEffect 와 useLayoutEffect 차이