React - lazy 함수

React에서 앱 성능 향상을 위해 존재하는 함수 React.lazy 가 있다.
위 함수에 대해서 찾아보면 코드 분할 번들링 동적 import 같은 표현들이 여러 자료에서 공통적으로 언급되는 것을 발견할 수 있었다.

React.lazy(() => import('./src/components/button.tsx'));

1. React.lazy 함수는 동적 임포트를 하기 위해 존재하는 함수다.
2. 동적 import는 리액트 앱이 1개의 번들 파일로 번들링되었을때 그 번들 파일에 항상 포함되어있도록 하는게 아니라 다른 번들 파일에 임포트되는 코드를 담아놓고 필요할때마다 해당 코드를 불러오는 것을 의미한다.
3. 처음 앱이 렌더링될때 필요한 기본 번들 파일이 가벼워지므로 앱 성능 향상을 기대할 수 있다.

lazy 함수를 사용할때 함께 사용해야하는 리액트 컴포넌트가 있다.

<Suspense fallback={<div>...is loading</div>}>
  <RouterProvider router={router} />
</Suspense>