React.lazy and (next.js) Suspense

Tony·2021년 11월 14일
1

react

목록 보기
39/82

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고
간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다.

React.lazy

컴포넌트를 렌더링 하는 시점에
비동기적으로 로딩할 수 있게 해주는 유틸 함수

const SplitMe = React.lazy(() => import('./SplitMe'));
// ./SplitMe를 불러오는 것 같다.

Suspense

  • 리액트 내장 컴포넌트
  • 코드 스플리팅된 컴포넌트를 로딩하도록 발동 시킬 수 있고,
  • 로딩이 끝나지 않았을 때 보여줄 UI를 설정할 수 있음
import React, { Suspense } from 'react';

(...)
<Suspense fallback={<div>loading...</div>}>
  <SplitMe />
</Suspense>
  • Suspense에서 fallback props를 통해 로딩 중에 보여 줄 JSX를 지정할 수 있습니다.

Dynamic Import

With suspense

Full SSR support in concurrent mode is still a work-in-progress.

  • 동시 모드에서 전체 SSR 지원은 아직 진행 중입니다.

고찰

한 페이지에 많은 정보를 담고 있어서 스크롤이 길게 있는 경우에
일정 화면에 보이지 않는 아래쪽에선 로딩을 하고 있지 않다가
스크롤을 내려서 아래쪽 컨텐츠가 화면에 보여야 할 때 React.lazy와 Suspense를 사용하면 좋을 것 같다.

참고

profile
움직이는 만큼 행복해진다

0개의 댓글