[React] React.lazy 란?

1. 정의 

• lazy import :  컴포넌트를 별도로 분할하여 필요할 때 비동기적 로드를 할 수 있도록 해주는 React 함수
• 초기 로딩 시간을 줄이고 앱 성능을 향상시킬 수 있다는 장점이다.

2. 사용법

• import > 분리한 컴포넌트 js파일을 lazy로 감싼다.

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

const SubPage = lazy( () => import('./testpage/SubPage.js') )

• 이렇게 lazy 문법을 사용하면 SubPage 컴포넌트가 필요해진다면 import를 한다는 의미이다.
• 따라서 SubPage 컴포넌트를 별도의 js로 나누기 때문에 첫 페이지 로딩 속도를 향상 시킬 수 있다.

//기타 내용 생략 (SubPage의 Route 부분)
<Suspense fallback={ <div>로딩중임</div> }>
  <SubPage Product={Product} />
</Suspense>

• lazy를 사용하면 SubPage 컴포넌트의 지연시간이 발생할 수 있는데 이런경우 "Suspense"를 사용한다.
•  "Suspense"를 사용하면 지연시간동안 보여줄 html를 작성할 수 있다.
• 즉, 지연에 관한 부분을 사용자에게 시각적으로 알려줄 수 있다.