[React] Suspense

React.Suspense

Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 react에 내장되어 있는 기능이다.

 

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

 

lazy를 통해 import 하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다.
이 로딩되는 시간동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 바로 Suspense이다.

data fetching 과정이 이루어지고 컴포넌트가 마운트 되도록 하고 그 시간동안 로딩 화면을 보여주도록 Suspense를 활용할수 있다.

Suspense component에는 fallback이라는 prop이 있고 이건 component가 await되는 동안 표시할 메세지를 render할수 있게 해준다.

 

<Suspense fallback={<h1>Loading</h1>}><MovieInfo/></Suspense>