Suspense가 뭔가요?

컴포넌트가 읽어들이고 있는 데이터가 아직 준비되지 않았고 React에 알려줄 수는, 데이터 불러오기

라이브러리에서 사용할 수 있는 메커니즘입니다.

 

아래 코드는 <App /> 렌더링 할 때 Home 컴포넌트가 렌더링되는 지 테스트한 경우입니다.

Home component를 lazy하게 가져오기 때문에 fallback에 정의된 Loading...이 DOM에 그려집니다.

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

const Home = lazy(() => import('./pages/home/Home'))

function App() {
  return (
    <Suspense fallback={(<h1>Loading...</h1>)}>
       <Switch>
         <Route exact path="/" component={Home} />
       </Switch>
    </Suspense>
  )
}