[React] 리액트 lazy loading

리액트 컴포넌트 lazy loading 방법

lazy loading은 로딩을 바로 하지 않고 지연시켰다가 로딩한다는 의미로 페이지에 그 부분이 보여져야 할 때 로딩하기에 처음 화면을 띄울때 속도를 개선할 수 있음

지연 로딩에는 여러 방법이 있지만 React.lazy 를 활용한 방법을 알아보고자 함

 

예시

fallback에는 로딩 중일 때 실행될 요소를 넣어줌

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}