React Suspense

React suspense란
: 컴포넌트를 동적으로 가져올 수 있게 도와주는 기능

//Sample Component
export default function SampleComponent(){
	return <>동적으로 가져오는 컴포넌트</>
}

//app.tsx
import {Suspense, lazy} from 'react'

//SampleComponent lazy로드
const DynamicSampleComponent = lazy(() => import('./SampleComponent')

export default function App(){
	return (
    	<Suspense fallback={<>로딩중</>}>
        <DynamicSampleComponent />
        </Suspense>
    )
}

lazy는 컴포넌트를 첫번째 렌더링 시에 불러오지 않고 최초 렌더링 이후 컴포넌트를 지연시켜 불러오는 역할을 함
Suspense 태그는 lazy로 지연시켜 불러온 컴포넌트를 children으로 받는다
지연 컴포넌트를 불러오기 전에 fallback을 보여주고 지연로딩이 완료된 지연 컴포넌트를 보여준다.

참고: 모던 리액트 Deep Dive