[React,TS]React.lazy와 Suspense로 코드 스플리팅 구현하기

목차

 개요

현대 웹 애플리케이션은 점점 더 복잡해지고, 초기 로딩 시간을 줄이는 것은 사용자 경험을 향상시키는 중요한 요소이다.

React에서는 'React.lazy'와 'Suspense'를 통해 코드 스플리팅을 쉽게 구현할 수 있는 방법을 제공한다.

이번 글에서는 'React.lazy'와 'Suspense'를 사용하여 동적 컴포넌트를 로드하는 방법을 알아보려고 한다.

 

 코드 스플리팅이란?

코드 스플리팅은 애플리케이션을 여러 개의 작은 청크(chunk)로 나누어, 필요한 순간에 해당 청크를 로드하는 기술이다.

이를 통해 초기 로딩 시간을 줄이고, 사용자가 필요한 기능을 사용할 때만 관련 코드를 로드하여 성능을 최적화 할 수 있다.

 

 React.lazy

'React.lazy'는 React에서 컴포넌트를 동적으로 임포트하여 코드 스플리팅을 쉽게 구현할 수 있도록 도와주는 함수이다.

'React.lazy'를 사용하면 큰 애플리케이션을 여러 개의 작은 청크로 나눌 수 있다.

 

기본 사용법

1. 컴포넌트를 동적으로 임포트한다.
2. 'Suspense' 컴포넌트를 사용하여 로딩 상태를 처리한다.

코드

import React, { Suspense } from 'react';

// Lazy-loaded component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

 Lazy-loaded Component

• 'React.lazy'를 사용하여 'LazyComponent'를 동적으로 임포트한다. 이는 웹팩 같은 번들러가 청크로 분리하여 나중에 필요할 때 로드할 수 있도록 한다.
• 'React.lazy'의 인자는 동적으로 임포트할 모듈을 반환하는 함수여야 한다.

 Suspense

• 'Suspense' 컴포넌트는 lazy-loaded 컴포넌트를 감싸서 로딩 상태를 처리한다.
• 'fallback' 프로퍼티는 컴포넌트가 로드되는 동안 보여줄 UI를 지정한다.

 

 주의 사항

• 'React.lazy'와 'Suspense'는 서버 사이드 렌더링(SSR)에서는 동작하지 않으므로, SSR을 사용하는 애플리케이션에서는 다른 방법을 사용해야 한다.
• 'React.lazy'를 사용하면 번들러가 해당 컴포넌트를 별도의 청크로 분리하지만, 모든 동적 임포트를 이런 방식으로 처리하면 네트워크 요청이 많아질 수 있으므로 적절한 분할 전략이 필요하다.

사용했을 때와 안사용했을때의 차이점

구분	사용한 경우	사용하지 않은 경우
초기 로딩 시간	애플리케이션을 여러 개의 청크로 나누어 필요할 때 로드, 초딩 시간이 '짧아짐'	애플리케이션의 모든 코드를 한 번에 번들링하여 로드, 초기 로딩 시간이 '길어짐'
네트워크 요청	코드가 여러 청크로 나누어져 '필요한 순간에만 네트워크 요청' 발생	모든 코드가 한 번에 로드되어 네트워크 부하가 초기에 집중
사용자 경험(UX)	'초기 로딩이 빨라지고 필요한 부분만 로드'하여 사용자 경험 향상	초기 로딩 시간이 길어 사용자 경험 저하
코드 관리 및 유지보수	코드가 여러 청크로 분리되어 '관리 용이'	모든 코드가 하나의 번들에 포함되어 관리가 복잡