lazy

lazy는 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있다.

const SomeComponent = lazy(load)

레퍼런스

lazy(load)

lazy를 이용하여 로딩하는 React 컴포넌트를 선언하려면 컴포넌트 외부에서 lazy를 호출해야한다.

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

 

매개변수

• load : Promise 또는 또 다른 thenable 을 반환하는 함수이다. React는 컴포넌트를 처음 렌더링 하려고 할 때까지 load를 호출하지 않는다.

반환값

lazy는 트리에 렌더링할 수 있는 React 컴포넌트를 반환한다.

컴포넌트의 코드가 여전히 로드되는 동안 렌더링을 시도하면 일시 중지된다.

로딩 중에 loading indicator를 표시하려면 <Suspense>를 사용해야 한다.

 

load 함수

load는 매개변수를 수신하지 않는다.

반환값으로는 Promise 또는 다른 thenable을 반환해야 한다.

 

사용법

Suspense와 Lazy-loading 컴포넌트

일반적으로 정적 import 선언으로 컴포넌트를 가져온다.

import MarkdownPreview from './MarkdownPreview.js';

해당 컴포넌트 코드가 처음 렌더링 될 때까지 로드되는 것을 연기하려면 import를 다음처럼 바꾼다.

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

 

이 다음에 요청에 따라 컴포넌트 코드가 로드되는 동안 표시할 항목도 지정해줘야 한다.

lazy 컴포넌트 또는 해당 부모 컴포넌트 중 하나를 <Suspense> 바운더리로 감싸서 이 작업을 수행할 수 있다.

 

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

 

 

주의할점

lazy 컴포넌트를 다른 컴포넌트 내부에서 선언하면 안된다.

import { lazy } from 'react';

function Editor() {
  // 🔴 잘못된 방법: 이렇게 하면 다시 렌더링할 때 모든 상태가 재설정됩니다.
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

 

항상 모듈의 최상위에서 선언해야 한다.

import { lazy } from 'react';

// ✅ 올바른 방법: lazy 컴포넌트를 컴포넌트 외부에 선언합니다.
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}