[React] lazy loading

Lazy Loading이란?

lazy loading이란 말그대로 느린 로딩을 의미합니다.

react를 사용하여 렌더링을 할때, 프로젝트가 클수록, 초기 렌더링 시간이 오래걸리기 때문에 이를 해결해야할 필요성이 있습니다.(CSR을 채택하기 때문)

그리하여 나온 방법이 한번에 다 로딩하지 않는 느린 로딩 방식입니다.

처음에 모든페이지를 다 렌더링 하지않고 특정 페이지를 요청했을때 js를 다운받아오는 방식입니다.

 

 

 

문법

lazy Loading 안썼을 때

import A from './경로';

lazy Loading 썼을 때

const A = React.lazy(() => import('./경로');

이제 A컴포넌트는 필요시에만 다운로드되어 작동합니다.

 

 

 

문제점

근데 이렇게 까지만 구현하면 원하는대로 작동하지 않습니다.

페이지 요청 -> 페이지 다운로드 -> 페이지 보여줌

우리가 페이지 이동을 했을때는 페이지 다운로드 상태기 때문에 원하는 페이지를 볼 수 없습니다.

페이지 로딩시간을 기다려줄 스피너를 추가하면 정상적으로 보여줍니다.

 

 

Q. 모든 페이지를 LAZY LOADING으로 해야하나?

유저가 방문할 확률이 높은 페이지는 굳이 Lazy Loading할 필요없습니다.

방문할 확률이 낮은 페이지를 위주로 Lazy Loading하여 다운로드 효율을 높여야 합니다.