[React] 지연로딩(lazy loading)

lazy loading : 지연로딩

React.lazy() 동적으로 코드를 로드하고 렌더링 할 수 있게 해 줌

실제로 컴포넌트가 사용될 때까지 실제 컴포넌트의 코드를 로드하지 않음

 

lazy import

import { Suspense, lazy } from "react";

React.lazy() 사용할 때, 사용하고자 하는 컴포넌트를 React.Suspense 컴포넌트 안에 렌더링 해야 함

Suspense 컴포넌트는 fallback prop으로 컴포넌트가 로드되는 동안 로딩 스피너를 보여줄 수 있음

 

React.lazy 사용

const Main = lazy(()=> import("../pages/MainPage"))

Suspense로 컴포넌트 감싸주기 + fallback prop추가!

const Loading = <div>Loding...</div>


...

<Suspense fallback={Loading}>
	<Main/>
</Suspense>

...

 

 

Router와 함께 사용하기

• 경로 설정을 위해 createBrowserPouter 사용
• element로 불러오기!

 

createBrowserRouter import

const { createBrowserRouter } = require("react-router-dom");

 

element로 Suspense 불러오기

const root = createBrowserRouter([
    {
        //객체스타일로 - 메인페이지
        path:'',
        element: <Suspense fallback={Loading}><Main/></Suspense>//어떤컴포넌트를 보여줄건가?
    },
])

 

 

전체코드

import { Suspense, lazy } from "react";
const { createBrowserRouter } = require("react-router-dom");

const Loading = <div>Loding...</div>
const Main = lazy(()=> import("../pages/MainPage")) 

const root = createBrowserRouter([
    { 
        path:'',
        element: <Suspense fallback={Loading}><Main/></Suspense> 
    } 
])

export default root;