React.lazy()와 Suspense 작업

[React] 코드 분할(Code Splitting)

코드 분할 방법!을 알아보자 오늘은 lazy() 메서드와 Suspense에 대해 알아보자

React.lazy()

React.lazy() 메서드를 사용하면 동적 가져오기를 사용하여 구성 요소 수준에서 React 애플리케이션을 쉽게 코드 분할할 수 있다! 동적 import()를 호출하는 함수를 인자로 가져오면 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 promise로 반환됩니다.

before

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

after

import React, { lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

const DetailsComponent = () => (
  <div>
    <OtherComponent />
  </div>
)

lazy()로 promise 를 반환하게 되면 지연로딩이 되면서 성능적인 최적화 부분이 일어난다. 또한 동기적인 부분이 비동기적인 로딩으로 변환이 된다.
다만 주의할 점은 React.lazy는 아직 서버 사이드 렌더링을 하지 못 해서 서버사이드 렌더링을 위해서는 Loadable Components(아직 모르는 개념 몰?루)를 추천한다

Suspense란?

사용자에게 페이로드를 전송할 때의 문제는 저사양 장치와 저속 네트워크 일 때 페이지 로드를 완료하는 데 걸리는 시간인데 Suspense는 어떤 컴포넌트가 읽어야 하는데 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 메커니즘이다.
중요한 점은 suspense를 사용하면서 lazy()를 함께 사용해야 한다는 점이다.

사용법

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

lazy(), Suspense 설명 끝!