React : React Suspense와 lazy Loading

들어가기 앞서

해당 글은 프로젝트를 진행 후, 개인적으로 웹서비스 최적화를 위해  알아본 기술들을 정리하기 위해 적는 글입니다.

 

React.lazy()

• React 컴포넌트를 동적으로 가져올 수 있는 함수로 dynamic import를 할 수 있게 해준다.
• 이는 import()를 통해 불러오는 요소들을 무조건 불러오는 것이 아닌 사용자가 실제로 사용할 때만 로드될 수 있게 해주며, 초기 페이지 로딩 시간을 줄여준다. 

suspense

• React Suspense는 react lazy를 통해 지연 로딩된 컴포넌트가 로드되는 동안 로드 상태를 처리하고, 대체 콘텐츠를 표시하기 위해 사용된다. 
• 이는 지연 로딩된 컴포넌트가 로드되는 동안 표시할 내용을 지정하는 fallback Props가 필요하며, 기본적으로 로딩 중인 상태를 나타내는 내용을 넣는다.

사용하는 이유

 

• React.lazy는 코드 분할을 통해 컴포넌트를 동적으로 로드하며, Suspense는 이러한 컴포넌트의 로딩 상태를 처리합니다.
• 함께 사용하여 큰 애플리케이션의 초기 로딩 속도를 줄이고, 필요한 자원만 로드하여 사용자에게 더 빠르고 매끄러운 경험을 제공합니다.

 

import React, { Suspense, lazy } from "react";
import { Route, Routes } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import CircularProgress from '@mui/material/CircularProgress'; 

const MainPage = lazy(() => import("../pages/MainPage"));
const StorePage = lazy(() => import("../pages/StorePage"));
const NotFoundPage = lazy(() => import("../pages/NotFoundPage"));

const LoginPage = lazy(() => import("../pages/LoginPage"));
const RegisterPage = lazy(() => import("../pages/RegisterPage"));
const FindPasswordPage = lazy(() => import("../pages/FindPasswordPage"));
const ResetPasswordPage = lazy(() => import("../pages/ResetPasswordPage"));
const ChangePasswordPage = lazy(() => import("../pages/ChangePasswordPage"));
const VerifyCurrentPassword = lazy(() => import("../pages/VerifyCurrentPassword"));

const MyFridge = lazy(() => import("../pages/MyFridge"));
const CartPage = lazy(() => import("../pages/CartPage"));
const PaymentPage = lazy(() => import("../pages/PaymentPage"));
const OrderCompletePage = lazy(() => import("../pages/OrderCompletePage"));
const MyProfile = lazy(() => import("../pages/MyProfile"));
const MyRecipePage = lazy(() => import("../pages/MyRecipePage"));
const SearchResults = lazy(() => import("../pages/SearchResults"));

const IngredientsDetail = lazy(() => import("../pages/IngredientsDetail"));
const RecipePage = lazy(() => import("../pages/RecipePage"));
const RecipeDetail = lazy(() => import("../pages/RecipeDetailPage"));

const AdminOrderPage = lazy(() => import("../pages/AdminOrderPage"));
const AdminIngredientsPage = lazy(() => import("../pages/AdminIngredientsPage"));
const AdminUserPage = lazy(() => import("../pages/AdminUserPage"));
const AdminRecipePage = lazy(() => import("../pages/AdminRecipePage"));

const AppRouter = () => {
  return (
    <Suspense
      fallback={
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100vw',
          height: '100vh',
          backgroundColor: '#f0f0f0'
        }}>
          <CircularProgress />
        </div>
      }
    >
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/store" element={<StorePage />} />
        <Route path="*" element={<NotFoundPage />} />

        <Route path="/login" element={<LoginPage />} />
        <Route path="/register" element={<RegisterPage />} />
        <Route path="/find-password" element={<FindPasswordPage />} />
        <Route path="/reset-password/:token" element={<ResetPasswordPage />} />
        <Route path="/account/verify-current-password" element={<VerifyCurrentPassword />} />
        <Route path="/account/change-password" element={<ChangePasswordPage />} />

        <Route path="/ingredients/:id" element={<IngredientsDetail />} />
        <Route path="/ingredients" element={<IngredientsDetail />} />
        <Route path="/recipes/all" element={<RecipePage />} />
        <Route path="/recipes/best" element={<RecipePage />} />
        <Route path="/recipes/new" element={<RecipePage />} />
        <Route path="/recipes/:category" element={<RecipePage />} />
        <Route path="/recipe/:id" element={<RecipeDetail />} />

        <Route element={<PrivateRoute permissionLevel="customer" />}>
          <Route path="/fridge" element={<MyFridge />} />
          <Route path="/cart" element={<CartPage />} />
          <Route path="/payment" element={<PaymentPage />} />
          <Route path="/payment/success" element={<OrderCompletePage />} />
          <Route path="/account/profile" element={<MyProfile />} />
          <Route path="/account/recipe" element={<MyRecipePage />} />
          <Route path="/search" element={<SearchResults />} />
        </Route>

        <Route element={<PrivateRoute permissionLevel="admin" />}>
          <Route path="/admin/recipe" element={<AdminRecipePage />} />
          <Route path="/admin/ingredients" element={<AdminIngredientsPage />} />
          <Route path="/admin/order" element={<AdminOrderPage />} />
          <Route path="/admin/user" element={<AdminUserPage />} />
        </Route>
      </Routes>
    </Suspense>
  );
};

export default AppRouter;