lazy Loading

유저가 웹에 접속할떄 import 할 페이지들이 많아지면 렌더링에 오래걸린다. 그래서 lazy Loading이라는걸 사용한다.

즉, 필요할때만 꺼내다 쓴다는 의미로 이해하면 쉽다.

사용도 쉽다.

크게 2가지만 설정하면 된다.

1. 지연로딩할 컴포넌트를 import문으로 감싸준다.

2. loader , action 같은 속성들을 같이 import 했다면 key : value 부분에 할당 되어있던 value 대신 화살표 함수를 사용하고 그 안에서 import 해준다.
   
   2-1. loader , action 에 전달받을 파라미터가 있다면 넣어준다.

지연 로딩 적용 전

import { React, lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import { RecoilRoot } from "recoil";

import "./index.css";

import App, { loader as postsLoader } from "./routes/App";
import NewPost, { action as newPostAction } from "./routes/NewPost";

import RootLayOut from "./routes/RootLayout";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayOut />,
    children: [
      {
        path: "/",
        element: <App />,
        loader: postsLoader,
        children: [
          {
            path: "/create_post",
            element: <NewPost />,
            action: newPostAction,
          },
        ],
      },
    ],
  },
]);

지연 로딩 적용 후

import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import { RecoilRoot } from "recoil";

import "./index.css";

import RootLayOut from "./routes/RootLayout";


const App = lazy(() => import("./routes/App"));
const NewPost = lazy(() => import("./routes/NewPost"));


const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayOut />,
    children: [
      {
        path: "/",
        element: (
          <Suspense fallback={<p>로딩중입니다...</p>}>
            <App />
          </Suspense>
        ),
        loader: () => import("./routes/App").then((module) => module.loader()),
        children: [
          {
            path: "/create_post",
            element: (
              <Suspense fallback={<p>로딩중입니다...</p>}>
                <NewPost />
              </Suspense>
            ),
            action: ({ request }) => import("./routes/NewPost").then((module) => module.action({ request })),
          },          
        ],
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/sign_up",
    element: <SignUp />,
  },
]);