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

yo_onms·2022년 3월 13일
0

React

목록 보기
2/7
post-thumbnail

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;

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

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

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

😎 후기

Lazy를 적용해볼 일이 많이 없어 혼자서 예제를 만들어보니 정말 쓸만한 친구 인거 같다. 이렇게 최신 기술들이 나오면 시도 해보는 개발자가 되리라 다시 한번 다짐하는 하루였다...

profile
프론트엔드 주니어 개발자

0개의 댓글