/ REACT

React - lazy, Suspense에 대해

React은 다음과 같이 구성되어 있습니다.

React - lazy, Suspense

이번 포스팅에서는 lazy와 Suspense에 대해서 알아보겠습니다.

React로 개발한 사이트들은 기본적으로는 SPA(Single Page Application)입니다. 사이트를 빌드하면 하나의 큰 JS파일, HTML, CSS파일 등이 생성이 됩니다. 하나의 JS파일안에 모든 컴포넌트, 페이지, 여러 기능들이 모두 모여있게 되는데 이는 용량이 제법 크기 마련입니다. 그래서 사용자가 사이트 메인페이지에 접속하게 되면 그 큰 JS파일을 받아야하기 때문에 초기 로딩속도가 느릴 수 있습니다. 따라서 아무것도 없는 흰 화면을 오래볼 가능성이 있습니다. 따라서 이 하나의 JS파일을 분할을 하게되면 이런 문제점을 조금은 해결할 수 있습니다.
이것은 당장 필요없는 페이지를 천천히 로드할 수 있도록 하면되는데 lazy라는 함수를 사용하면 됩니다. 아래 예시를 보겠습니다.

Detail이라는 페이지가 있습니다. 기본적으로는 다음과 같이 import를 하는 것이 맞습니다.

import Detail from "./routes/Detail";

하지만 이 Detail페이지가 당장 필요하지 않은 페이지라면 다음과 같이 lazy()라는 함수를 이용할 수 있습니다.

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

const Detail = lazy(() => import('./routes/Detail.js'));

이렇게 하게 되면 Detail페이지가 필요해질 때 import를 하게 됩니다. 이런식으로 import를 하게 되면 초기로딩속도를 개선할 수 있습니다. 물론 사이트를 발행할 때도 하나의 jS가 아니라 별도의 JS파일로 분리가 됩니다.

Suspense

물론 lazy로 import하는 방식도 단점이 있을 수 있습니다. Detail페이지가 필요해지는 시점에서는 약간의 지연시간이 발생할 수 있습니다. 초기에 import되지 않고 필요해지는 시점에서 import를 하기 때문입니다. 지연되는 시간동안 사용자는 역시 흰 화면을 보게될 것입니다. 이런 경우 Suspense를 활용하여 로딩페이지를 띄워주면 좋을 것입니다.

<Route exact path='/detail' element={
  <Suspense fallback={<div>로딩중입니다. 조금만 기다려주세요!</div>}>
    <Detail />
  </Suspense>
}></Route>

위와 같이 Detail페이지를 Suspense안에 넣어주면 됩니다. 추가로 fallback이라는 것의 값으로 로딩되는 동안에 사용자에게 보여질 메세지를 넣어주면 됩니다.

End.