React Component의 Lazy Loading

2018년 16.6 버전 React가 배포되면서 3rd party 라이브러리 없이 Lazy loading handling이 가능한 간편한 기능이 배포되었다

So What's New in React v16.6?

React.lazy() 는 별도 라이브러리가 없이 Code splitting을 통해 React component를 지연 로딩시키는 방식.

이 방식은 필요하거나 사용자에게 critical한 Component를 먼저 렌더링하고 이후에 나머지를 렌더링하기 위한 기법.

기본 사용 방법 : https://ko.reactjs.org/docs/code-splitting.html

Suspense

Lazy 함수에서 기초적으로 지연 로딩 대상이 될 Component를 Wrapping하기 위해 필요한 Component.

여러 개의 Component가 Lazy 로딩 되도록 Wrapping될 수 있고, fallback prop을 받아서 rendering 진행 중에 보여주는 방식으로 설정할 수 있다.

Lazy Loading(& Suspense)가 중요한 이유

우선, React + Webpack으로 사용 시(CRA이면 기본 설정), 하나의 JavaScript Chunk로 Code component들을 묶어서 Browser에 보내게 된다.

• 일반적으로 React로 개발 시, SPA로 개발한다면 1개의 JS Bundle file로 묶여서 전달된다.

그러나 Application이 커지게 되면, bundle 크기가 점점 커지면서 Application 성능이 매우 나빠지게 될 수 있다.

Code Splitting을 하게 되면 Bundle이 작은 Chunk들로 분리되며 중요 Chunk가 먼저 로딩되고 다른 것은 지연 로딩이 된다.

TTI(Time to Interactive)