프론트엔드 성능 최적화: 코드 스플리팅과 지연 로딩

byCode Keeper •


프론트엔드 성능 최적화: 코드 스플리팅과 지연 로딩


프론트엔드 애플리케이션의 성능을 최적화하는 것은 사용자 경험을 향상시키기 위해 매우 중요합니다. 이 포스팅에서는 코드 스플리팅과 지연 로딩을 사용하여 리액트(React) 애플리케이션의 성능을 최적화하는 방법을 살펴보겠습니다.


코드 스플리팅과 지연 로딩의 중요성


코드 스플리팅과 지연 로딩은 애플리케이션의 초기 로딩 속도를 향상시키고, 사용자가 필요한 기능을 실제로 사용할 때만 해당 코드가 로드되도록 합니다. 이를 통해 불필요한 코드 로드를 방지하고, 네트워크 트래픽을 줄여 성능을 최적화할 수 있습니다.


코드 스플리팅(Code Splitting)


코드 스플리팅은 애플리케이션을 여러 번들로 나누어, 필요한 부분만 로드하도록 하는 기법입니다. 리액트 애플리케이션에서 코드 스플리팅을 구현하기 위해 React.lazy와 Suspense를 사용할 수 있습니다.


React.lazy와 Suspense 사용법


React.lazy는 동적으로 컴포넌트를 로드할 수 있게 해주는 함수입니다. Suspense는 로딩 중 상태를 처리하기 위해 사용됩니다.


// src/components/HeavyComponent.js
import React from 'react';

const HeavyComponent = () => {
  return <div>This is a heavy component!</div>;
};

export default HeavyComponent;


// src/App.js
import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./components/HeavyComponent'));

const App = () => {
  return (
    <div>
      <h1>Welcome to the app!</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
};

export default App;

위 코드에서는 HeavyComponent를 React.lazy를 사용하여 동적으로 로드하고, Suspense를 사용하여 로딩 중 상태를 처리합니다.


지연 로딩(Lazy Loading)


지연 로딩은 사용자가 필요로 하는 시점에 데이터를 로드하는 기법입니다. 이를 통해 초기 로딩 시간을 줄이고, 사용자가 필요로 하는 시점에만 데이터를 로드할 수 있습니다.


이미지 지연 로딩 예제


이미지 지연 로딩은 초기 로딩 시점에 모든 이미지를 로드하지 않고, 사용자가 이미지를 실제로 볼 때 로드하는 방식입니다.


// src/components/LazyImage.js
import React, { useState, useEffect } from 'react';

const LazyImage = ({ src, alt }) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.disconnect();
          }
        });
      },
      { threshold: 0.1 }
    );

    observer.observe(document.querySelector(`#${alt}`));
  }, [alt]);

  return <img id={alt} src={isVisible ? src : ''} alt={alt} />;
};

export default LazyImage;


// src/App.js
import React from 'react';
import LazyImage from './components/LazyImage';

const App = () => {
  return (
    <div>
      <h1>Welcome to the app!</h1>
      <LazyImage src="path/to/your/image.jpg" alt="example" />
    </div>
  );
};

export default App;

위 코드에서는 IntersectionObserver를 사용하여 이미지가 뷰포트에 들어올 때만 이미지를 로드하도록 합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 코드 스플리팅과 지연 로딩을 사용하여 리액트 애플리케이션의 성능을 최적화하는 방법에 대해 살펴보았습니다. 이를 통해 초기 로딩 시간을 줄이고, 네트워크 트래픽을 줄여 사용자 경험을 향상시킬 수 있습니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전