React.lazy & Suspense

코드 스플리팅을 위해 리액트에 내장된 기능으로 유틸 함수인 React.lazy와 컴포넌트인 Suspense가 있다.

이 기능은 리액트 16.6 버전부터 도입. 이전 버전에서는 import함수를 통해 불러온 다음, 컴포넌트 자체를 state 에 넣는 방식으로 구현해야 한다.

 

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고도 간편하게 컴포넌트 코드 스플리팅을 할 수 있다. 

 

* 코드 스플리팅(Code Splitting)?
코드 분할이다. 싱글 페이지 애플리케이션의 성능을 향상시키는 방법.
코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생긴다.

 

React.lazy

컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수이다.

사용방법

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

 

Suspense

리액트 내장 컴포넌트로서 코드 스플리팅된 컴포넌트를 로딩하도록 발동시킬 수 있고,

로딩이 끝나지 않았을 때 보여 줄 UI를 설정할 수 있다.

사용방법

import { Suspense } from 'react';

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

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

 

---

참고사이트

https://joshua1988.github.io/vue-camp/advanced/code-splitting.html

Code Splitting | Cracking Vue.js

 

참고 서적

'리액트를 다루는 기술 (김민준 지음)'