[React] Code Splitting & lazy

// before
import OtherComponent from './OtherComponent';

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

 

React.lazy의 방식으로 import를 진행하게 된다면 MyComponent가 처음으로 렌더링이 되었을 때 OtherComponent를 포함한 번들을 자동으로 불러옵니다. 그리고 이 함수는 React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환해야 합니다.

 

import React, { Suspense } from 'react';

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

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

 

React.lazy에 있는 lazy 컴포넌트는 Suspense 컴포넌트의 하위에 렌더링되어야 합니다. 그리고 Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다. Suspense 컴포넌트에서 fallback이라고 하는 prop 내부에 또 다른 컴포넌트가 들어있는 모습을 볼 수 있습니다. 이 컴포넌트는 해당 컴포넌트가 로드될 때까지 기다리는 공안 렌더링하려는 React 엘리먼트를 받아들일 수 있습니다.

 

import React, { Suspense } from 'react';

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

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

 

또한 다음과 같이 여러 개의 lazy 컴포넌트들이 하나의 Suspense 컴포넌트로 감싸여질 수도 있습니다.

 

import React, { Suspense } from 'react';
import Tabs from './Tabs';
import Glimmer from './Glimmer';

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

function MyComponent() {
  const [tab, setTab] = React.useState('photos');
  
  function handleTabSelect(tab) {
    setTab(tab);
  };

  return (
    <div>
      <Tabs onTabSelect={handleTabSelect} />
      <Suspense fallback={<Glimmer />}>
        {tab === 'photos' ? <Photos /> : <Comments />}
      </Suspense>
    </div>
  );
}

 

이번에는 다음의 예시를 살펴보기로 하겠습니다. Suspense 컴포넌트에는 fallback props로 Glimmer 컴포넌트가 들어있습니다. 그리고 이 내부에는 Photos 컴포넌트와 Comments 컴포넌트가 들어 있습니다. 만약에 tab이 photos인 경우에는 Photos 컴포넌트가 보여질 것이고 그렇지 않은 경우에는 Comments가 보여질 것입니다.

이 상황에서, Photos에서 Comments 컴포넌트가 보여져야 하는데, Comments 컴포넌트 내부가 아직 준비되지 않은 상황이라면 어떻게 할까요? 이 경우에 fallback props로 Glimmer를 보여주게 됩니다.

‘네트워크 장애’를 보여주고자 하는 경우에는 다음과 같이 작성할 수도 있습니다.

 

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

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

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

 

 

 

참고:

https://velog.io/@sjpark960520/%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85Code-Splitting%EA%B3%BC-React.lazy