Lazy Loading을 통한 웹 애플리케이션의 컴포넌트 지연 로딩 방법

10 Nov 2023

javascript

웹 애플리케이션은 많은 사용자에게 빠른 속도와 원활한 사용 경험을 제공해야합니다. 이를 위해 중요한 요소 중 하나는 컴포넌트의 로딩 시간을 최적화하는 것입니다. Lazy Loading은 웹 애플리케이션의 성능을 향상시키는 방법 중 하나로, 페이지의 로딩 속도를 개선하고 사용자가 필요로 할 때만 필요한 컴포넌트를 로드하는 방법입니다.

Lazy Loading은 일반적으로 이미지나 동적인 컴포넌트와 같은 큰 자원들을 로딩할 때 사용됩니다. 아래는 웹 애플리케이션에서 컴포넌트의 지연 로딩을 구현하는 방법입니다.

1. Intersection Observer를 사용한 Lazy Loading

Intersection Observer는 브라우저의 Observer API의 일부로, 요소가 화면에 나타났을 때 알림을 받을 수 있는 기능입니다. 이를 이용하여 Lazy Loading을 구현할 수 있습니다. 아래는 Intersection Observer를 사용한 Lazy Loading의 예입니다.

const images = document.querySelectorAll('.lazy-image');

const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.setAttribute('src', image.dataset.src);
      observer.unobserve(image);
    }
  });
};

const imageObserver = new IntersectionObserver(handleIntersection);

images.forEach(image => {
  imageObserver.observe(image);
});

위 코드는 이미지 요소에 .lazy-image 클래스를 추가한 후, data-src 속성에 실제 이미지 경로를 저장합니다. Intersection Observer를 사용하여 .lazy-image 요소가 화면에 나타났을 때 해당 이미지 경로를 로드하고, Observer를 해제합니다. 이를 통해 필요한 이미지만 로딩하여 성능을 개선할 수 있습니다.

2. Code Splitting을 사용한 Lazy Loading

Code Splitting은 웹 애플리케이션의 자바스크립트 코드를 여러 개의 작은 청크로 분할하는 기법입니다. 이를 이용하여 Lazy Loading을 구현할 수 있습니다. 예를 들어, React 애플리케이션에서는 React.lazy와 Suspense를 사용하여 컴포넌트의 지연 로딩을 구현할 수 있습니다.

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

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

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);

위 코드에서 LazyComponent는 웹 애플리케이션에서 로딩시간이 오래 걸리는 컴포넌트입니다. React.lazy와 Suspense를 사용하여 LazyComponent를 지연 로딩하고, 로딩 중에는 fallback 속성에 지정한 컴포넌트를 보여줍니다.

결론

Lazy Loading은 웹 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는데 도움이 되는 중요한 방법 중 하나입니다. Intersection Observer를 사용한 이미지의 지연 로딩과 Code Splitting을 사용한 컴포넌트의 지연 로딩은 Lazy Loading을 구현하는 두 가지 주요한 방법입니다. 이러한 방법들을 적절히 활용하여 웹 애플리케이션의 컴포넌트 로딩 속도를 최적화할 수 있습니다.

참고 문헌:

#tech #webdev