Suspense fallback과 React.lazy() 함수

import React, { Suspense } from 'react';

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

function App() {
	reutrn (
    	<>
            <Suspense fallback={<div>Loading...</div>}>
            	<LazyComponent />
            </Suspense>
        </>
    )
}

export default App;

Suspense 컴포넌트는 LazyComponent를 비동기적으로 로드하는 동안 fallback 속성에 지정된 내용인 Loading... 을 표시한다.

LazyComponent가 완전히 로드 되면 Suspense 컴포넌트는 LazyComponent를 렌더링한다.

 

Suspense fallback 로딩 중에 사용자에게 진행 상태를 시각적으로 보여줄 수 있다.

일반적으로 로딩 스피너, 로딩 상태 메시지 또는 로고를 표시하는 데에 사용된다.

 

React.lazy() 함수 동적으로 로드되는 컴포넌트를 생성한다.

코드 스플리팅을 위해 사용되는 기능이다.

코드 스플리팅은 앱 번들의 크기를 줄이고 초기 로딩 시간을 최적화하는 데 사용된다. 

import() 문법을 활용하여 컴포넌트를 비동기적으로 로드한다.