React - React.lazy & Suspense & Loadable Components

import logo from "./logo.svg";
import "./App.css";
 
function App() {
  const onClick = async () => {
    const { default: notify } = await import("./notify");
    notify();
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} classname="App-logo" alt="logo"></img>
        <p onClick={onClick}>Hello React!</p>
      </header>
    </div>
  );
}
 
export default App;

위와 같이 컴포넌트를 작성하면 import()함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장합니다. 그리고 실제 함수가 필요한 지점에 파일을 불러와서 함수를 사용할 수 있습니다.,

 

이렇게 import를 함수로 사용하는 문법은 비록 아직 표준 자바스크립트가 이니지만, stage-3단계에 있는 dynamic import라는 문법입니다. 현재 웹팩에서 지원하고 있으므로 별도의 설정 없이 프로젝트에 바로 사용할 수 있습니다. 

 

위와 같이 787~로 시작하는 chunk파일이 생성되어 notify 관련 코드가 들어가게 됩니다.

 

React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅

React.lazy, Suspense는 리액트에 내장된 유틸 함수이다.

 

import React, { Suspense, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
const SplitMe = React.lazy(() => import("./SplitMe"));
 
function App() {
  const [visible, setVisible] = useState(false);
  const onClick = async () => {
    setVisible(true);
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} classname="App-logo" alt="logo"></img>
        <p onClick={onClick}>Hello React!</p>
        <Suspense fallback={<div>loading...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
}
 
export default App;

import React from "react";
 
const SplitMe = () => {
  return <div>SplitMe</div>;
};
 
export default SplitMe;

위와 같은 결과를 볼 수 있게 된다.

 

Loadable Components를 통한 코드 스플리팅

Loadable Components는 코드 스플리팅을 편하게 하도록 도와주는 서드파티 라이브러리입니다.  이 라이브러리의 이점은 서버사이드 렌더링을 지원한다는 것입니다. React.lazy와 Suspense는 아직 서버사이드 렌더링을 지원하지 않습니다. 또한 렌더링하기 전에 필요할 때 스플리팅된 파일이 미리 불러올 수 있는 기능도 있습니다.

 

여기서는 서버 사이드 렌더링 없이 Loadable Components의 기본적인 사용법만 알아보겠습니다.

import React, { Suspense, useState } 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 = async () => {
    setVisible(true);
  };
 
  const onMouseOver = () => {
    SplitMe.preload();
  };
 
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} classname="App-logo" alt="logo"></img>
        <p onClick={onClick} onMouseOver={onMouseOver}>
          Hello React!
        </p>
        {visible && <SplitMe />}
      </header>
    </div>
  );
}
 
export default App;

방식은 이러하고 컴포넌트를 미리 불러오는(preload)방법또한 존재합니다.

마우스 커서를 Hello React!위에 올리기만 해도 로딩이 시작됩니다. 그리고 클릭했을 떄 렌더링됩니다. 이런 기능을 구현하면 나중에 사용자에게 더 좋은 경험을 제공할 수 있습니다. Loadable Components는 미리 불러오는 기능 외에도 타임아웃, 로딩 UI 딜레이, 서버사이드 렌더링 호환 등 다양한 기능을 제공합니다.