[React] lazy

lazy

lazy는 처음 렌더링이 이루어질 때, 컴포넌트의 코드 로딩을 지연시킨다.

const SomeComponent = lazy(load)

• component 바깥에서 lazy를 호출한다. 그러면 지연 로딩되는 리액트 컴포넌트가 선언된다.

import { lazy } from 'react';

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

Parameters

• load
  - Promise를 반환하거나 아니면 thenable 함수를 넣는다.
  - (중요) 리액트는 반환된 컴포넌트를 랜더링할 필요가 있는 순간까지 load를 호출하지 않는다. (여기서 지연로딩의 문제점이 있어서, 사전로딩을 통해 성능 최적화를 하기도 한다.) 이 load가 호출되고 나면, resolve되기를 기다렸다가 랜더링을 한다. 그러면 이 값은 캐시가 되어서, 2번 이상 이 load를 호출하지 않는다. 만약에 이 Promise 가 reject되면 nearest Error Boundary에서 핸들링 해야 한다.

Usage

Lazy-loading components with Suspense

// 지연로딩 아닌 것.
import MarkdownPreview from './MarkdownPreview.js';

// 지연로딩 시킨 것.
import { lazy } from 'react';  

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

로딩 중에 어떤 것이 보여야 하는지 특정해야 한다.
그 부모 컴포넌트를 Suspense로 감싸게 되면,
1. 랜더링 하려고 안 하면 lazy 로 감싼 컴포넌트는 로딩이 안 된다.
2. 로딩 중이라면, Suspense 에서 fallback 값으로 준 컴포넌트가 보인다.

Troubleshooting

• 컴포넌트 안에서 lazy components를 선언하면 안 된다.
• 모듈 최상단에서 선언하라!