19.2.2 React.lazy와 Suspense 사용하기

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 정말 간편하게 컴포넌트 코드 스플리팅을 할 수 있습니다. 먼저 사용 방법을 알아보고 우리가 만든 컴포넌트에 적용해 보겠습니다.

React.lazy는 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수입니다. 사용 방법은 다음과 같습니다.

예시 코드

const SplitMe = React.lazy(() => import('./SplitMe'));

---

 

Suspense는 리액트 내장 컴포넌트로서 코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있고, 로딩이 끝나지 않았을 때 보여 줄 UI를 설정할 수 있습니다. 사용 방법은 다음과 같습니다.

예시 코드

import React, { Suspense } from 'react';

(...)
<Suspense fallback={<div>loading...</div>}>
  <SplitMe />
</Suspense>

---

 

Suspense에서 fallback props를 통해 로딩 중에 보여 줄 JSX를 지정할 수 있습니다.