vite-plugin-next-router 설치

NewBean·2024년 6월 12일

프로젝트를 Vite로 만들기 시작했습니다.
프로젝트 안에서 페이지 이동을 간편하게 하기 위해, React Router를 사용하려고 했는데, 흥미로운 플러그인을 발견했어요!

1. vite-plugin-next-router란?

vite-plugin-next-router란? Vite와 Next.js를 결합하여, React 애플리케이션의 라우팅을 최적화하는 플러그인입니다.
이는 Next.js의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 기능을 결합하는 역할을 해요.

기존에 저는 <BrowserRouter>, <Routes>, <Route>를 사용해, 동적 라우팅을 구성했었어요.
하지만 이 플러그인은 폴더명을 따라 자동으로 라우팅 되기에, 이 플러그인을 선택했습니다!

2. 설치방법

설치 홈페이지 바로가기(npm)
두 가지 값을 입력해서, 플러그인을 설치해 줍니다.

npm install vite-plugin-next-react-router
npm install vite react-router-dom

3. 사용방법

프로젝트 루트에 있는 vite.config.ts 또는 vite.config.js에서 plugin 배열에 withReactRouter()를 추가해 줍니다.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import withReactRouter from "vite-plugin-next-react-router";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), withReactRouter({
    pageDir: "src/pages",
    extensions: ["js", "jsx", "ts", "tsx"],
    layout: "_layout",
  }),],
});

그 뒤, main.tsx에서 <App/>을 react-router-dom의 <BrowserRouter>로 감싸줄께요.

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";

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

여기서 끝이 아니에요!
이 플러그인은 _layout.tsx 파일이 있어야 한다고 합니다.
이는 애플리케이션의 모든 페이지에 공통으로 적용되는 레이아웃을 정의해요.
각 페이지마다 중복된 레이아웃 코드를 작성할 필요 없이, 중앙에서 레이아웃을 관리할 수 있게 해준다고 합니다!

src/pages경로에 다음과 같은 코드를 입력해 줍시다.

_layout.tsx

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

const Layout: React.FC = () => {
  return (
    <div>
      {/* 비동기 로딩 상태를 처리 */}
      {/* fallback 속성 : 로딩 중에 표시될 컴포넌트를 지정 */}
      <Suspense fallback={"loading..."}>
        {/* 중첩된 라우트를 렌더링하는 위치 */}
        {/* 현재 URL에 맞는 하위 라우트 컴포넌트가 이 위치에 렌더링됨 */}
        <Outlet />
      </Suspense>
    </div>
  );
};

export default Layout;

그 다음, routes.tsx파일을 생성한 후, 다음과 같이 입력해 줍니다.
src경로에 작성해 주세요!

routes.tsx

import { lazy } from "react";
import GlobalLayout from "./pages/_layout";

const MainPage = lazy(() => import("./pages/MainPage"));
const MembershipPage = lazy(() => import("./pages/login/MembershipPage"));


export const routes = [
  {
    path: "/",
    element: <GlobalLayout />,
    children: [
      { path: "/", element: <MainPage /> },
      { path: "/login/membership", element: <MembershipPage /> },
    ],
  },
];

export const pages = [
  { route: "/" },
  { route: "/login/membership" },
];

/ 경로에서는 MainPage 컴포넌트를 보여주고, /login/membership 경로에서는 MembershipPage 컴포넌트를 보여주는 방식입니다.

자 이제 npm run dev로 시작해 볼까요!
하지만 아무것도 나오지 않습니다..

알아보니 elem이라는 변수에 useRoutes 훅을 사용하여, routes.tsx 파일을 기반으로 라우팅 요소를 생성해야 한다고 하네요!
App.tsx 파일에 다음과 같이 입력해 줍시다.

App.tsx

import { useRoutes } from "react-router-dom";
import { routes } from "./routes";


const App: React.FC = () => {
  const elem = useRoutes(routes);
  return elem;
};

export default App;

이제 다시 실행하면, 정상적으로 작동이 됩니다!

localhost:5173/ 경로