[React] 코드 분할과 React.lazy

코드 분할 Code-Splitting

 

번들링 Bundling

---

대부분 React 앱들은 Webpack, Rollup, Browserify 같은 툴을 사용하여

여러 파일을 하나로 병합한 “번들 된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다.

 

코드 분할

---

하지만 사용자의 앱이 커지면 번들도 커지게 된다.

앱이 커져서 로드 시간이 길어지는 것을 방지하기 위해 코드를 주의 깊게 살펴야 한다.

번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 “나누는” 것입니다. 

코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다.

코드 분할은 앱을 “지연 로딩” 하게 도와주고 앱 사용자에게 획기적인 성능 향상을 하게 합니다. 

앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여준다.

 

import()

---

앱에 코드 분할을 도입하는 가장 좋은 방법은 동적 import() 문법을 사용하는 방법이다.

 

import("./math").then(math => {
  console.log(math.add(16, 26));
});

 

Webpack이 이 구문을 만나게 되면 앱의 코드를 분할하게 된다.

Create React App을 사용하고 있다면 이미 Webpack이 구성이 되어 있기 때문에 즉시 사용할 수 있다.

 

 

React.lazy

---

주의: React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없다.

React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있다.

 

import React, { Suspense } from 'react';

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

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

 

MyComponent가 처음 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러온다.

React.lazy는 동적 import()를 호출하는 함수를 인자로 가진다. 이 함수는 React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환해야 한다.

Suspense 컴포넌트는 lazy 컴포넌트를 감싼다.(즉, lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 한다.)

Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다. fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들인다.  

 

 

 

 

---

https://ko.reactjs.org/docs/code-splitting.html