React 공식문서 -lazy

- lazy를 사용하면 처음 렌더링될 때까지 컴포넌트 코드의 로딩을 지연시킬 수 있다.

import { lazy } from 'react';

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

- 컴포넌트 외부에서 lazy를 호출하여 지연 로드된 React 컴포넌트를 선언한다.

 

매개변수

* load

- Promise 또는 다른 thenable(then 메서드를 가진 Promise와 유사한 객체)을 반환하는 함수이다.

- React는 반환된 컴포넌트를 처음 렌더링하려고 시도할 때까지 load를 호출하지 않는다.

- React는 load를 처음 호출한 후에는 resolve될 때까지 기다린 다음 resolve된 값을 React 컴포넌트로 렌더링한다.

- 반환된 Promise 및 Promise의 resolve된 값은 모두 캐시되므로 React는 load를 두 번 이상 호출하지 않는다.

- Promise가 reject되면 React는 가장 가까운 Error Boundary에 reject된 이유를 throw 한다.

 

- load 함수는 매개변수를 받지 않는다.

---

Lazy-loading components with Suspense(Suspense가 있는 지연 로딩 컴포넌트)

- lazy를 사용해서 컴포넌트 로드를 지연시키게 되면, 로드되는 동안 <Suspense>를 사용해서 표시될 내용도 지정해야 한다.

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

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

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

- 위 예제에서는 lazy로 지정한 MarkdownPreview 컴포넌트가 로드될 때까지 Suspense fallback에 의해 Loading이 대신 표시된다.

---

My lazy component's state gets reset unexpectedly(lazy 컴포넌트의 상태가 예기치 않게 초기화 됩니다)

- lazy는 다른 컴포넌트의 내부가 아닌 항상 모듈의 최상위 레벨에서 선언해야 한다.

// 다른 컴포넌트 내부에 선언
import { lazy } from 'react';

function Editor() {
  // 🔴 Bad: This will cause all state to be reset on re-renders
  // 🔴 나쁨: 이렇게 하면 리렌더링시마다 모든 state가 초기화됩니다
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

// 모듈의 최상위 레벨에서 선언
import { lazy } from 'react';

// ✅ Good: Declare lazy components outside of your components
// ✅ 좋음: lazy 컴포넌트를 컴포넌트들의 밖에서 선언하세요
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}

 

---

* 참고 : React 공식문서(https://react-ko.dev/learn)