Suspense를 사용하여 자바스크립트 빌드를 지연시키는 방법은?

07 Nov 2023

suspense

React에서 Suspense를 사용하여 자바스크립트 빌드를 지연시키는 방법은 다음과 같습니다.

첫째, Suspense 컴포넌트를 사용하려는 컴포넌트의 상위 계층에 추가합니다.

import React, { Suspense } from 'react';

function App() {
  return (
    <div>
      {/* 다른 컴포넌트들 */}
      
      <Suspense fallback={<LoadingSpinner />}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

둘째, lazy 함수를 사용하여 불러오고자 하는 컴포넌트를 동적으로 로딩합니다.

import React, { lazy } from 'react';

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

export default LazyComponent;

로딩 중에 보여 줄 대체 컨텐츠를 나타내기 위해 fallback prop을 사용합니다. 이것은 Suspense 컴포넌트가 로딩 중에 렌더링 될 일시적인 컴포넌트입니다.

function LoadingSpinner() {
  return <div>Loading...</div>;
}

이제 Suspense 컴포넌트는 LazyComponent 컴포넌트를 로딩하면서 로딩 중에 LoadingSpinner 컴포넌트를 보여줍니다. 이를 통해 자바스크립트 빌드를 지연시키고 로딩 화면을 제공할 수 있습니다.

이와 관련된 자세한 내용은 React 공식 문서에서 확인할 수 있습니다: React Suspense