[React] React.lazy와 Suspense

React.lazy

사용자에게 필요한 것보다 더 많은 코드를 제공할 필요가 없으므로 동적 가져오기를 통해 번들을 분할하여 제공할 수 있는 방법이다.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

React.lazy를 사용하지 않으면 모든 파일이 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이는 페이지 성능에 상당한 영향을 줄 수 있다.

이 React.lazy는 Suspense 구성 요소와 결합하여 로드 상태를 처리해줄 수 있다.

코드 분할을 적용할 위치를 잘 모르겠다면

• 경로 수준에서 시작.
  경로는 분할할 수 있는 애플리케이션의 지점을 식별하는 가장 간단한 방법입니다. React 문서에 Suspense를 react-router와 함께 사용하는 방법이 설명되어 있습니다.
• 특정 사용자 상호작용(예: 버튼 클릭)에서만 렌더링되는 사이트 페이지의 큰 구성요소를 식별합니다. 이러한 구성 요소를 분할하면 JavaScript 페이로드가 최소화됩니다.
• 화면 밖에 있고 사용자에게 중요하지 않은 것은 모두 분할하는 것을 고려하십시오.

Suspense

네트워크를 통해 코드 분할 구성 요소(lazy로 불러오거나 api 등으로 불러오는 특정 코드 분할 부분)를 가져올 때 사용자가 경험해야 하는 약간의 지연이 항상 있으므로 유용한 로드 상태를 표시하는 것이 중요하다. Suspense 구성 요소와 함께 React.lazy를 사용하면 이 문제를 해결하는 데 도움이 된다.

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

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));
const MoreInfoComponent = lazy(() => import('./MoreInfoComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
    <MoreInfoComponent />
  </Suspense>
)

위와 같은 경우 Suspense가 사용하지 않았다면 각각의 컴포넌트들이 차례로 로딩되는 문제인 엇갈린 로딩이 발생하기 쉽다. 이로 인해 사용자 경험이 down

React는 서버 측에서 렌더링될 때 Suspense를 지원하지 않아 서버에서 렌더링하는 경우 React 문서에서 권장하는 loadable-components와 같은 다른 라이브러리를 사용하는 것이 좋다.

Suspense 적용

• 크롬 개발자 도구의 네트워크 속도를 줄여서 로딩 확인
• querySelector 를 찾지 못하는 문제

ErrorBoundary

https://web.dev/i18n/ko/code-splitting-suspense/