[React] Lazy Loading (지연 로딩), Suspense (서스펜스)
Lazy-Loading (지연로딩) 이란?
로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해 준다는 뜻이다.
사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해 오는 것이 아니라 보이는 페이지만 로드한 후
다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다.
React.lazy를 사용하는 이유?
규모가 큰 react 애플리케이션은 많은 요소와 라이브러리 등으로 구성이 된다.
필요할 때만 애플리케이션의 다른 부분을 로드하려고 하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모의
단일 JS 번들이 사용자에게 전송이된다.
=> 이는 페이지 성능에 상당한 영향을 주는데,
🖐🏻 React.lazy() 메서드 요소들은 손쉽게 개별 JS 청크로 분리하는 기본 방법을 제공한다.
➕ 또한, Suspense 구성 요소와 결합할 때 로드 상태를 처리할 수 있다. (같이 쓰면 유용함)
lazy loading 적용 방법
import React, { lazy } from 'react';
// 기존 import 하는 방식
import Header from '../Components/Layout/Header';
// Lazy Loading 적용
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const DetailsComponent = () => {
return(
<div>
<AvatarComponent />
</div>
)
}
👉🏻 기존에 import 방식과 React.lazy()의 import 방식은 다르다.
React.lazy()는 import() 구문을 반환하는 콜백 함수를 인자로 받는다.
동적으로 불러오는 컴포넌트 파일에는 반드시 지켜줘야 하는 두 가지 규칙이 있다.
1. React 컴포넌트를 포함해야 한다.
2. default export를 가진 컴포넌트여야 한다.
Suspense
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => {
return(
<Suspense fallback={renderLoader()}>
<AvatarComponent />
</Suspense>
)
}Suspense에 fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링 하려는 React 엘리먼트를 받아들인다.
Suspense 컴포넌트는 lazy 컴포넌트를 감싼다.
하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있다. lazy 컴포넌트는 Suspense 컴포넌트 하위에서
렌더링 되어야 하며, Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 콘텐츠를 보여줄 수 있게 해 준다.
❗️그러나❗️
네트워크를 통해 코드 분할 구성 요소를 가져올 때 사용자가 겪어야 하는 약간의 지연이 항상 있으므로
유용한 로드 상태를 표시하는 것이 중요하다. Suspense 구성 요소와 함께 React.lazy를 사용하면 이 문제를 해결하는 데 도움이 된다.
React Router와 함께 사용
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => {
return(
<Router>
<Suspense fallback={renderLoader()}>
<Routes>
<Route path='/' element=<About/>/>
</Routes>
<AvatarComponent />
</Suspense>
</Router>
)
}React.lazy()는 React 공식문서에 따르면, Router 바로 아래에 Suspense를 위치시키고,
Route로 보여줄 컴포넌트들을 React.lazy로 불러오는 것을 권장하고 있다.
참고
https://web.dev/i18n/ko/code-splitting-suspense/
https://itprogramming119.tistory.com/entry/React-Reactlazy%EB%9E%80