리액트 - Lazy Load : 컴포넌트 로딩 분리하기

Lazy Load 기능으로 import하기

특징

사이트를 발행할 때 하나의 js 파일로 생성되지 않고 별도의 파일로 분리되게 됩니다.
그러면 Datail 컴포넌트가 필요할 때가 되어야 로딩을 시작을 하게 되고
=> 모든 페이지를 한 번에 로딩하지 않도록 하여 최초 로딩 시간을 줄여줍니다.

---

사용 방법

아래와 같은 형태로 컴포넌트를 import를 하여 페이지를 Lazy Load 할 수 있습니다.

const Datail = lazy(() => import("./components/Detail.js"));

 

---

로딩중이라는 UI를 나타내려면

아래와 같이 <Suspense>로 감싸주면 됩니다.

<Suspense fallback={<div>로딩중</div>}>

   <Routes></Routes>

</Suspense>;