[React] React.lazy 와 Suspense 를 사용한 코드 스플리팅

코드 스플리팅은 웹 애플리케이션의 성능 최적화 기법 중 하나로, 사용자에게 필요한 시점에만 특정 코드 또는 리소스를 로딩하여 애플리케이션의 초기 로딩 시간을 줄이는 방법입니다. React 애플리케이션에서 코드 스플리팅을 효과적으로 사용하면, 애플리케이션의 사용성과 반응성을 크게 향상시킬 수 있습니다. 이 가이드에서는 React 애플리케이션에서 코드 스플리팅을 구현하는 방법을 자세히 살펴보겠습니다.

1. React.lazy와 Suspense를 사용한 동적 임포트

React 16.6 이상에서는 React.lazy 함수를 사용하여 컴포넌트를 동적으로 임포트하고, Suspense 컴포넌트로 로딩 상태를 처리할 수 있습니다. 이 방법은 주로 라우트 기반의 코드 스플리팅에 사용됩니다.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

위 예시에서 lazy 함수는 import() 호출을 인자로 받아 동적으로 컴포넌트를 로드합니다. Suspense 컴포넌트는 컴포넌트의 로딩 상태를 처리하며, fallback prop으로 로딩 중에 표시될 React 요소를 지정할 수 있습니다.

2. import()를 사용한 코드 스플리팅

동적 import() 문은 코드 스플리팅을 위해 JavaScript 모듈을 비동기적으로 로드하는 데 사용됩니다. 이 기능은 React와 직접적으로 연관된 것은 아니지만, React 애플리케이션에서 코드 스플리팅을 구현할 때 유용하게 사용될 수 있습니다.

예를 들어, 특정 버튼 클릭 시에만 필요한 모듈을 로드하는 경우 다음과 같이 구현할 수 있습니다.

function loadComponent() {
  import('./ExpensiveComponent').then((ExpensiveComponent) => {
    // 모듈 사용
  });
}

function App() {
  return <button onClick={loadComponent}>Load</button>;
}

3. Webpack의 SplitChunksPlugin 활용

Webpack을 사용하는 프로젝트에서는 SplitChunksPlugin을 활용하여 라이브러리나 공통 모듈 등을 별도의 청크로 분리할 수 있습니다. 이 플러그인은 Webpack에 기본 포함되어 있으며, webpack.config.js 파일에서 설정을 통해 커스터마이징할 수 있습니다.

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

4. Preloading과 Prefetching

코드 스플리팅과 함께 리소스의 Preloading(사전 로딩) 또는 Prefetching(사전 가져오기)을 사용하면, 사용자가 실제로 해당 리소스를 요청하기 전에 미리 로드하여 대기시킴으로써 애플리케이션의 반응 속도를 더욱 향상시킬 수 있습니다.

Webpack에서는 특정 리소스를 Preload 또는 Prefetch 하기 위한 특별한 주석 구문을 제공합니다.

import(/* webpackPrefetch: true */ './path/to/YourComponent');

결론

코드 스플리팅은 사용자에게 더 나은 경험을 제공하기 위해 React 애플리케이션의 성능을 최적화하는 중요한 방법입니다. React.lazy, Suspense, 동적 import() 문을 활용하고, 필요한 설정을 통해 애플리케이션의 로딩 시간을 단축시키며, 사용자의 대기 시간을 줄일 수 있습니다.