[React] 코드 스플리팅 (React.lazy & Suspense , Loadable Compononent)

코드 스플리팅이란 ?

코드 스플리팅은 하나의 파일로 번들링 된 것을 작은 조각으로 나누는 것을 의미합니다.

하나의 파일로 번들링 된 앱을 실행하면 첫 렌더링때 모든 코드 정보가 불러오게 되고, 이는 초기 렌더링을 느리게 만듭니다!

따라서 코드 스플리팅을 통해 초기 로딩 시간을 최적화 하고, 사용자 경험을 향상시킬 수 있습니다 (ง •̀_•́)ง

 

코드 스플리팅은 애플리케이션의 필요한 부분만 불러와, 사용자가 상호작용 하는 동안에 추가적인 리소스를 요청하는 방식으로 동작합니다.

 

 

React.lazy와 Suspense

React.lazy()는 동적으로 컴포넌트를 로드할 수 있는 React의 함수입니다. 'import()' 를 사용하여 컴포넌트를 동적으로 불러올 수 있게 해주는데요, 일반적으로 React.lazy()와 Suspense를 함께 사용합니다!

 

Suspense 컴포넌트는 React에서 비동기적으로 불러온 리소스(컴포넌트, 데이터 등 ... )가 준비될 때까지 임시로 UI를 보여줄 수 있게 해 줍니다. Suspense를 사용하여 동적으로 로드되는 컴포넌트의 로딩 상태를 처리할 수 있습니다.

(예를 들면 화면이 나타나기 전까지의 loading 문구 ...)

 

import React, { useState, Suspense } from 'react';
const SplitMe = React.lazy(() => import('./SplitMe'));

function App() {
  const [visible, setVisible] = useState(false);

  const onClick = () => {
    setVisible(true);
  };
  
  return (
    <div className='App'>
      <header className='App-header'>
        <p onClick={onClick}>Load SplitMe Component</p>
        <Suspense fallback={<div>Loading...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
}

export default App;

위의 예시 코드에서 React.lazt()를 사용하여 SplitMe 컴포넌트를 동적으로 불러오고,

Suspense를 사용하여 해당 컴포넌트가 로딩될 때가지 로딩 중임을 나타내는 fallback UI를 보여줍니다!

 

 

Loadable Component

앞서 소개한 것들 외에도 코드 스플리팅을 위해 Loadable Component같은 서드파티 라이브러리를 사용할 수 있습니다.

Loadable Component는 React.lazy()보다 더 많은 기능을 제공해줍니다 👾

( 미리 불러오기, 타임아웃, 로딩 UI 딜레이, 서버 사이드 렌더링 호환... )

 

Loadable Component는 서버 사이드 렌더링을 지원해줍니다 !

사용 전에 먼저

yarn add @loadable/component
npm add @loadable/component

로 설치를 해주세요

 

import { useState, Suspense } from 'react';
import logo from './logo.svg';
import './App.css';
import loadable from '@loadable/component';


const SplitMe = loadable(() => import('./SplitMe'), {
  fallback: <div>loading...</div>
});

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  const onMouseOver = () => {
    SplitMe.preload();
  };
    return (
      <div className='App' >
        <header className='App-header'>
          <img src={logo} className='App-logo' alt="logo" />
          <p onClick={onClick} onMouseOver={onMouseOver}>
            Hello React!
          </p>
          {visible && <SplitMe />}
        </header>
      </div>
    )
  }

export default App;

예시 코드입니다!

속도가 너무 빨라서 loading... 이 잘 보이지 않을 때는 

개발자도구 → 네트워크 탭 → Online을 클릭 한 후 느린3G로 설정

이렇게 하면 코드가 작동하는 걸 더 명확하게 확인할 수 있습니다 😺