React 앱의 로딩 속도를 높이는 코드 스플리팅 전략

React 앱의 로딩 속도를 높이는 코드 스플리팅 전략

프론트엔드 개발에서 사용자 경험은 매우 중요한 요소입니다. 특히, 웹 애플리케이션의 초기 로딩 속도가 느리면 사용자 이탈률이 높아지므로, 이를 개선하기 위한 여러 가지 전략이 필요합니다. 그중 하나가 바로 '코드 스플리팅'입니다. 이번 포스팅에서는 React 앱에서 코드 스플리팅을 통해 로딩 속도를 개선하는 방법에 대해 알아보겠습니다.

코드 스플리팅이란?

코드 스플리팅은 애플리케이션의 코드를 여러 개의 청크(chunk)로 나누어 필요한 부분만 로드하는 기술입니다. 이를 통해 초기 로딩 시간을 단축하고 필요할 때만 추가적인 코드를 다운로드할 수 있습니다. React에서는 여러 방법으로 코드 스플리팅을 구현할 수 있습니다.

React.lazy와 Suspense 사용하기

React에서 코드 스플리팅을 가장 간단히 구현할 수 있는 방법은 React.lazy와 Suspense를 사용하는 것입니다. 이 두 가지를 활용하면 동적으로 컴포넌트를 로드하여 초기 로딩 속도를 개선할 수 있습니다.

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

// 컴포넌트를 동적으로 import
const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <div>
      <h1>React 앱</h1>
      {/ Suspense 컴포넌트로 로딩 상태 관리 /}
      <Suspense fallback={<div>로딩 중...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

위 코드에서 LazyComponent는 컴포넌트를 동적으로 불러오기 위해 lazy 함수로 감싸졌습니다. Suspense는 이 컴포넌트 로딩 시 로딩 중 상태를 보여주는 역할을 합니다. 이를 통해 초기 로딩 시 모든 컴포넌트를 불러오는 대신 필요한 컴포넌트만 불러오게 됩니다.

React Router와 함께 코드 스플리팅

React Router를 사용하는 애플리케이션에서는 라우트에 따라 컴포넌트를 동적으로 로드하는 것이 매우 유용합니다. 이 경우 React.lazy와 Suspense를 활용하여 페이지에 따라 필요한 컴포넌트만 로드할 수 있습니다.

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

// 라우트에 따라 동적으로 import
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>로딩 중...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

위 예제에서는 Home과 About 컴포넌트를 라우트에 따라 동적으로 로드합니다. 사용자가 특정 페이지로 이동할 때만 해당 컴포넌트가 로드되므로 초기 로딩 속도가 개선됩니다.

Webpack과 코드 스플리팅

React 앱이 Webpack을 사용하고 있다면, 여러 가지 코드 스플리팅 전략을 추가로 사용할 수 있습니다. 예를 들어, Webpack의 SplitChunksPlugin을 활용하면 모듈을 자동으로 분리하여 청크를 생성할 수 있습니다.

Webpack 설정 파일(예: webpack.config.js)에 다음과 같은 구성을 추가합니다.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 70000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

위 설정을 통해 Webpack은 코드 스플리팅을 자동으로 처리하며, 외부 라이브러리와 모듈을 청크로 나누어 로드합니다. 이를 통해 트래픽을 줄이고 사용자 경험을 개선할 수 있습니다.

마무리

코드 스플리팅은 React 애플리케이션의 로딩 속도를 개선하는 효과적인 전략입니다. React.lazy와 Suspense를 통해 간단하게 구현할 수 있으며, React Router와 함께 사용하면 더욱 유연하게 관리할 수 있습니다. Webpack을 활용한 추가적인 설정으로 코드 스플리팅의 효율성을 높일 수도 있습니다. 이러한 방법들을 통해 사용자에게 더 빠르고 쾌적한 경험을 제공할 수 있도록 최선을 다해보세요.