Lazy-loading & preload / Suspense로 Component 성능 최적화하기

김현준·2024년 12월 23일
0

SEO와 코드 최적화

목록 보기
5/7

lazy

  • 컴포넌트, 이미지 등 리소스가 필요해지는 순간까지 로딩을 미루는 것
  • 이를 통해 초기 번들 크기를 줄이고 초기 로딩 속도를 개선할 수 있다.

preload

  • Lazy-loading과 반대로 리소스를 미리 로드하는 것
  • 예를 들면 Modal이 존재하는 페이지에 진입했을 때, 페이지 로드가 완료되면 Modal 컴포넌트를 미리 로드해서 사용자가 Modal의 로딩 시간 이후에 Modal을 클릭하게 된다면 바로 보여줄 수 있도록 하는 것

리액트 서스펜스를 사용하는 이유와 사용법 총정리

  • Suspense는 데이터 로딩으로 인한 사용자 경험의 저하를 해결하는 데 큰 도움을 준다
  • Suspense와 lazy를 함께 사용하면 초기 로딩 속도를 개선할 수 있다.
    • 필요한 컴포넌트만 먼저 로드하고 나머지는 필요할 때 로드하는 방식으로 초기 로딩에 걸리는 시간을 최적화
  • Suspense 중첩을 통해 로딩 순서를 정할 수도 있다.(공식문서)

[React+TypeScript] Lazy-loading & preload로 Component 성능 최적화하기

React 19에서의 Preload

React 19 이전과 달리 React 19는 기본적으로 preload API를 제공한다.
React 19에서는 preloadpreloadModule을 통해 리소스나 모듈을 미리 로드할 수 있다. Modal과 같은 컴포넌트에 Preload를 적용하면 사용자가 클릭하기 전에 리소스를 미리 준비할 수 있어 딜레이를 줄이고 UX를 개선할 수 있다.

React 19에서 Preload를 사용하는 방법

1. 간단한 Preload 예제

import React, { lazy, Suspense } from 'react';
import { preload } from 'react-dom';

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

function MyComponent() {
  const handlePreload = () => {
    preload('./Modal'); // Modal 컴포넌트를 미리 로드
  };

  return (
    <div>
      <button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
        Open Modal
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Modal />
      </Suspense>
    </div>
  );
}
  • 1. preload API 사용
    react-dom의 preload를 호출해 컴포넌트를 미리 로드한다.
  • 2. onMouseEnter 이벤트 활용
    사용자가 버튼에 마우스를 올리는 순간 Modal 컴포넌트를 미리 로드한다.

2. PreloadModule을 사용한 ESM 모듈 미리 로드

React 19에서는 ESM 모듈을 미리 로드할 수 있는 preloadModule API도 제공된다.

import React, { lazy, Suspense } from 'react';
import { preloadModule } from 'react-dom';

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

function MyComponent() {
  const handlePreload = () => {
    preloadModule('./Modal'); // ESM 모듈 미리 로드
  };

  return (
    <div>
      <button onMouseEnter={handlePreload} onClick={() => console.log('Open Modal')}>
        Open Modal
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <Modal />
      </Suspense>
    </div>
  );
}
  • 1. preloadModule API 사용
    react-dom의 preload를 호출해 컴포넌트를 미리 로드한다.
  • 2. 동일한 이벤트 활용
    사용자가 버튼에 마우스를 올리는 순간 Modal 컴포넌트를 미리 로드한다.

React 19 이전의 직접 구현 방식과 비교

React 19 이전에는 직접 preload 메서드를 구현해야 했지만, React 19에서는 react-dom에서 제공하는 기본 API를 사용하여 이를 간단히 처리할 수 있다.

React 19 이전: 직접 구현

const modalPromise = import('./Modal');
const Modal = React.lazy(() => modalPromise);
Modal.preload = () => modalPromise;

function MyComponent() {
  useEffect(() => {
    Modal.preload(); // Modal 컴포넌트를 미리 로드
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Modal />
    </Suspense>
  );
}

React 19 이후: API 활용

import { preload } from 'react-dom';

const Modal = React.lazy(() => import('./Modal'));

function MyComponent() {
  useEffect(() => {
    preload('./Modal'); // Modal 컴포넌트를 미리 로드
  }, []);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Modal />
    </Suspense>
  );
}
  • 차이점
    • React 19 이전에는 Lazy-loading 컴포넌트를 직접 수정하거나 별도의 유틸리티 함수를 작성해야 했다.
    • React 19 이후에는 preload API를 사용하여 간단히 구현할 수 있다.
profile
기록하자

0개의 댓글

관련 채용 정보