동적 import를 통해 컴포넌트를 손쉽게 javascript 청크로 분리 할 수 있도록 해주는 메서드
React는 기본적으로 첫 페이지를 로드할 때 어플리케이션 전체의 코드를 하나의 JS 번들로 넘겨주게 된다.
이 때문에 대규모 프로젝트에서는 첫 로드시 매우 큰 규모의 JS 번들을 사용자에게 전송하는데, 이는 페이지 성능에 큰 악영향을 끼칠 수 있기 때문이다.
import React, { lazy } from 'react';
const LazyComponent = lazy(()=> import('./LazyComponent'));
const RenderingComponent = () => {
return (
<div>
<LazyComponent />
</div>
);
}
이처럼 기존 import 하는 방식과 다르게 lazy메서드 내에 import 해주는 함수를 등록하여 컴포넌트를 불러올 수 있다.
이러한 과정을 통해 react는 초기 페이지를 로드 할 때에는 필요한 부분만 번들링을 하게 되고, 사용자의 필요에 따라서 추가적으로 필요한 컴포넌트들을 불러 올 수 있다.
하지만 이 경우, 그때 그때 필요한 JS 번들을 받아온다는 점에서 사용자에게 약간의 지연이 생기게 된다.
이러한 현상 때문에 사용자에게 유연한 로딩 환경을 제공하는 것이 중요한데, 그러기 위하여 Suspense와 lazy를 함께 사용하는 것이 바람직하다.