[실전 프로젝트] lazy, Suspense

페이지가 많다보니 첫 진입 로딩 속도가 느려서 React의 lazy, Suspense를 사용하여 로딩 속도를 개선하기 위해 사용

---

  [ lazy ]  

 

React의 lazy는 코드를 분할 하게 해준다.

코드 분할은 앱을 "지연 로딩" 하게 도와주고 앱 사용자들에게 획기적인 성능 향상을 제공합니다.

앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게 하며

앱의 초기화 로딩에 필요한 비용을 줄여 줍니다.

React의 lazy는 동적 import()를 호출하는 함수를 인자로 가집니다.
이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환 해야 합니다.

lazy 컴포넌트는 반드시 Suspense 컴포넌트 하위에서 렌더링이 되어야 하며,

Suspense는 lazy 컴포넌트가 로드 되기를 기다리는 동안 로딩 화면과 예비 컨텐츠를 보여줄 수 있게 합니다.

 

예시

 

  [ Suspense ]  

React Suspense는 구성 요소가 캐시에서 데이터를 로드하는 동안 렌더링을 일시 중단하는 일반적인 방법입니다.

즉, 화면을 구성하는 요소를 렌더링 하기 전에 기다리는 순간을 조작하는 방법입니다.

 

React 리액트 라우터 지연시간 걸기 (react router setTimeout, lazy, Suspense)

코드 분할 – React

---

  [ 사용한 방법 ]  

코딩애플 강의 듣고 정리한 내용

 

위 내용을 바탕으로 Route를 사용하고 있는 상황에서는 어떻게 사용 해야 할 지 구글링 해보니

1. React 라이브러리에서 Suspense와 lazy 컴포넌트를 import 해온다.
2. Suspense 컴포넌트를 Switch 밖에 감싼다.
3. Suspense 속성 중 fallback에는 페이지가 로드 되기 전에 띄워줄 컴포넌트를 넣어준다.
   (위 사진에서는 div를 사용했지만, 나는 로딩 페이지를 만들어 둔 게 있어서 기존에 만들어 둔
   Spinner 컴포넌트를 사용했다.)