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

yo_onms·2022년 3월 13일

React

목록 보기

2/7

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

잠깐 코드 스플리팅이 뭘까?

다른 곳에 여러 설명이 있지만 내가 이해한 대로 설명을 하자면
지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할때 불러와서 사용 할 수 있습니다. 이를 통하여, 페이지의 로딩 속도를 개선 할 수 있죠.

React.lazy와 Suspense는 아직 서버 사이드 렌더링을 할 수 없다고 한다.
서버에서 렌더링 된 앱에서 코드 분할을 하기 원한다면 Loadable Components를 사용하면 된다고 한다!!
자세한 설명은 공식문서를 참고하시면 됩니다!!

☝ 코드 스플리팅 하기 전

src/split.js

function split() {
  <div>버튼을 눌러야 나타난다!!</div>;
}

export default split;

src/App.js

import React from 'react';
import split from './split';

function App() {
    const [visible, setVisible] = useState(false);
    return (
      <div>
        <button
          onClick={() => {
            setVisible(true);
          }}
        >
          버튼
        </button>
		{visible ? <split /> : null}
      </div>
    );
}

export default App;

코드를 잘 보면 버튼을 누르게 되기 전까지 split 컴포넌트는 필요가 없습니다.
필요없는 코드들을 한번에 작성하게되면 초기화 로딩에 필요한 비용이 많이 들기 때문에 코드 스플리팅을 하는것입니다.

✌ 코드 스플리팅 후

import React, { Suspense, useState } from "react";

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

function App() {
  const [visible, setVisible] = useState(false);
  return (
    <div>
      <button
        onClick={() => {
          setVisible(true);
        }}
      >
        버튼
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        {visible ? <split /> : null}
      </Suspense>
    </div>
  );
}

export default App;