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() {
// ...
}'리액트 공식문서 읽어보기' 카테고리의 다른 글
| useCallback (0) | 2024.03.02 |
|---|---|
| <Suspense> (1) | 2024.02.25 |
| useState (0) | 2024.02.24 |
| useRef (0) | 2024.02.23 |
| useMemo (0) | 2024.02.22 |