[리액트] lazy와 suspense

import 함수를 통한 비동기 로딩

react v16.6 이후부터는 코드 스플리팅을 위한 내장 함수인 React.lazy와 Suspense 컴포넌트가 생겼습니다.

그 전 버전에서는 import 함수를 통한 비동기 로딩을 하며, 클래스형 컴포넌트를 사용해야 합니다.

우선 자바스크립트 함수를 비동기 로딩해보겠습니다. 당연히 파일을 따로 분리해서 빌드할 예정이니까 같은 파일 내에 저장하면 안되겠죠

보시면 클릭할 때 import를 진행하고 던져준 promise를 받아서 함수를 실행합니다.

받은 res를 콘솔창에 출력해보시면, import한 파일의 내용 중 export한 값들이 있는 것을 확인할 수 있습니다.

export default로 함수를 내보냈으니 우리가 사용하고자 하는 notify 함수는 default에 들어 있네요.

export default function notify() {
  alert("안녀어어어엉");
}
import React from "react";
import "./App.css";

function App() {
  return (
    <div>
      <button
        onClick={() => {
          import("./notify").then((res) => res.default());
        }}
      >
        눌러요
      </button>
    </div>
  );
}

export default App;
 

이제 빌드해보시면 3으로 시작하는 빌드 결과물이 나온 것을 확인하실 수 있습니다.

코드 스플리팅이 구현된 것이죠.

React.lazy와 Suspense 컴포넌트

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

React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없습니다. 서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 Loadable Components를 추천합니다. 이는 서버 사이드 렌더링과 번들 스플리팅에 대한 좋은 가이드입니다.

import React from "react";

function SplitMe() {
  return <div>SplitMe</div>;
}

export default SplitMe;

React.lazy를 통해 다이나믹 import로 사용할 컴포넌트를 가져옵니다.

그 후, Suspense 내부에서 해당 컴포넌트를 호출하면 됩니다.

Suspense의 fallback 속성은 해당 컴포넌트를 가져오는 데 걸리는 시간 동안 렌더할 일종의 로더를 지정할 수 있습니다.

import React, { Suspense, useState } from "react";
import "./App.css";

const SplitMe = React.lazy(() => import("./SplitMe"));

function App() {
  const [visible, setvisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setvisible(true);
        }}
      >
        가져오기
      </button>
      <Suspense fallback={<div>로딩중입니다...</div>}>
        {visible ? <SplitMe /> : null}
      </Suspense>
    </div>
  );
}

export default App;