Lazy

사용이유

큰 React 어플리캐이션은 많은 구성 요소, 유틸리티 및 라이브러리로 구성이 되어있다.
만약, 필요할 때만 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드할 시 Javascript 번들이 사용자에게 전송이 되는데, 이는 페이지 성능에 상당한 영향을 줄 수 있다.

이 때 React.lazy 함수는 개별 javascript를 청크로 분리하는 기본 방법을 제공한다.

Suspense

사용이유

사용자에게 큰 javascript 페이로드를 전송할 때 특히 저사양 장치와 저속 네트워크 연결에서는 페이지 로드를 완료하는데 시간이 걸린다.
이때 코드 분할 및 지연 로딩이 매우 유용하다.

그러나 네트워크를 통해 코드 분할 구성 요소를 가져올 때 사용자가 경험해야 하는 약간의 지연이 항상 있어서 로두 상태를 표시하는 것이 중요한데, 이때 Suspense와 React.lazy를 사용하면 이 문제를 해결하는 데 도움이 된다.

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

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

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

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

Suspense는 모든 React 구성 요소를 로드 상태로 표시할 수 있어서 fallback 다음에 이것이 어떻게 작동할 지 보여준다.

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

코드에 적용해본 결과, 만약 전체 화면에서 로딩바를 만드는 경우 인터넷이 빠른 경우 그냥 번쩍 하고 나타나는 현상이 발생하니 조건을 잘 보면서 사용.