[react 번역] lazy

출처: https://react.dev/reference/react/lazy

개요

lazy는 컴포넌트의 코드를 실제로 렌더링할 때까지 지연(코드 스플리팅)해서 불러오도록 해주는 React API입니다. 동적 import와 함께 사용하며, Suspense와 조합해 로딩 상태를 처리할 수 있습니다.

const SomeComponent = lazy(load);

Reference

`lazy(load)`

컴포넌트 외부(모듈 스코프)에서 lazy 컴포넌트를 선언합니다.

파라미터
- load: Promise(thenable)를 반환하는 함수. 실제로 컴포넌트를 렌더링할 때까지 이 함수는 호출되지 않습니다. 첫 렌더 시에만 호출되며, 이후에는 캐시됩니다. Promise가 reject되면 가장 가까운 Error Boundary에서 에러를 처리합니다.
반환값
- lazy 컴포넌트(React 컴포넌트 타입). 렌더 시 코드가 아직 로드되지 않았다면 suspend 상태가 되어 Suspense fallback이 표시됩니다.

load 함수

파라미터 없음.
Promise(thenable)를 반환해야 하며, resolve 값의 .default가 유효한 React 컴포넌트여야 합니다.

사용법

Suspense와 함께 lazy 컴포넌트 사용하기

보통은 정적 import로 컴포넌트를 불러옵니다:

import MarkdownPreview from './MarkdownPreview.js';

lazy를 사용하면, 해당 컴포넌트가 실제로 렌더될 때까지 코드를 불러오지 않습니다:

import { lazy } from 'react';
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

이렇게 하면, MarkdownPreview가 처음 렌더될 때까지 번들에 포함되지 않고, 필요할 때만 동적으로 로드됩니다. 이때 로딩 중에는 Suspense fallback UI가 표시됩니다.

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

코드가 아직 로드되지 않았다면 Loading 컴포넌트가 대신 표시됩니다.
코드가 로드되면 실제 컴포넌트가 렌더링됩니다.

참고: dynamic import()는 번들러/프레임워크의 지원이 필요합니다. lazy로 불러오는 컴포넌트는 반드시 default export여야 합니다.

트러블슈팅

lazy 컴포넌트의 state가 예상치 않게 초기화되는 경우

lazy 컴포넌트는 반드시 컴포넌트 외부(모듈 스코프)에서 선언해야 합니다. 컴포넌트 내부에서 선언하면, 리렌더마다 새로운 컴포넌트가 생성되어 상태가 초기화됩니다.

import { lazy } from 'react';

// ✅ 올바른 예시
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}

// ❌ 잘못된 예시
function Editor() {
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}