컴포넌트 lazy loading

src/pages/main/index.tsx

@@ -1,22 +1,23 @@
-import React from 'react';
-import Hero from "./Hero.jsx";
-import Business from "./Business.jsx";
-import Project from "./Project.jsx";
-import Partners from "./Partners.jsx";
-import Directions from "@/pages/main/Directions.jsx";
-import Footer from "@/pages/main/Footer.jsx";
+import React, { lazy, Suspense } from 'react';
+
+const Hero = lazy(() => import("./Hero.jsx"));
+const Business = lazy(() => import("./Business.jsx"));
+const Project = lazy(() => import("./Project.jsx"));
+const Partners = lazy(() => import("./Partners.jsx"));
+const Directions = lazy(() => import("@/pages/main/Directions.jsx"));
+const Footer = lazy(() => import("@/pages/main/Footer.jsx"));
 
 const Main = () => {
-    return (
-        <>
-            <Hero/>
-            <Business/>
-            <Project/>
-            <Partners/>
-            <Directions/>
-            <Footer/>
-        </>
-    );
+  return (
+    <Suspense fallback={<div>로딩 중...</div>}>
+      <Hero/>
+      <Business/>
+      <Project/>
+      <Partners/>
+      <Directions/>
+      <Footer/>
+    </Suspense>
+  );
 };
 
-export default Main;
+export default Main;