React의 Lazy Loading

대규모 React 앱은 큰 JavaScript 번들을 생성합니다. 큰 번들은 사이트 속도를 느리게 만듭니다. 사용자는 앱과 상호작용하기 위해 더 오래 기다려야 합니다. 이는 사용자 경험을 저해합니다.

Lazy loading이 이 문제를 해결합니다. 사용자가 필요할 때만 컴포넌트를 로드합니다. 모든 것을 한꺼번에 로드하는 것을 방지할 수 있습니다.

Lazy loading의 장점:

React.lazy() 사용법 React는 컴포넌트를 동적으로 가져오기 위해 lazy()라는 함수를 제공합니다. React는 컴포넌트를 렌더링할 때만 코드를 다운로드합니다.

예제 코드:

import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

lazy 컴포넌트를 사용할 때는 반드시 Suspense를 함께 사용해야 합니다. Suspense는 컴포넌트가 로드되는 동안 fallback UI를 보여줍니다.

예제 코드:

import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductDetail />
    </Suspense>
  );
}

성공을 위한 두 가지 규칙:

프로젝트에서 lazy loading을 사용하시나요? 아래에 댓글을 남겨주세요. 답변해 드리겠습니다.

Source: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk