React 앱에서 지연 로딩(Lazy Loading) 비디오 구현하기

React 앱에서 비디오를 지연 로딩하면 초기 페이지 로딩 속도를 크게 개선할 수 있습니다. 사용자가 비디오가 위치한 영역에 도달했을 때만 비디오를 로드하기 때문에 불필요한 리소스 낭비를 줄이고 사용자 경험을 향상시킬 수 있습니다.

1. 지연 로딩(Lazy Loading) 개념 이해하기

지연 로딩은 필요한 시점이 올 때까지 리소스 로딩을 미루는 기법입니다. 비디오 파일처럼 용량이 큰 리소스에 적용하면 초기 렌더링이 빨라지고 네트워크 부담이 감소합니다.

2. React에서 Intersection Observer 활용하기

가장 간단하고 효율적인 방법은 Intersection Observer API를 사용하는 것입니다. 이 API는 요소가 뷰포트 내에 들어오는 시점을 감지해 콜백함수를 실행합니다.

3. 예제 코드 구현하기

import React, { useState, useRef, useEffect } from 'react';

const LazyVideo = ({ src, poster, width = '600', height = '340' }) => {
  const videoRef = useRef(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsIntersecting(true);
          observer.disconnect();
        }
      },
      { threshold: 0.25 }
    );

    if (videoRef.current) {
      observer.observe(videoRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={videoRef} style={{ width, height }}>
      {isIntersecting ? (
        <video width={width} height={height} controls poster={poster} preload="metadata">
          <source src={src} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      ) : (
        <div style={{ width, height, backgroundColor: '#000' }}>Loading video...</div>
      )}
    </div>
  );
};

export default LazyVideo;

4. 사용법

위 컴포넌트를 원하는 위치에 아래와 같이 사용합니다.

<LazyVideo
  src="https://www.example.com/video.mp4"
  poster="https://www.example.com/poster.jpg"
  width="800"
  height="450"
/>

5. 주의사항

- 모바일 환경 및 구형 브라우저에서 Intersection Observer 지원 여부를 확인하세요.

- 비디오를 너무 일찍 로딩하면 지연 로딩 의미가 퇴색됩니다. 적절한 threshold 값을 조절해 보세요.

- SEO에는 크게 영향을 미치지 않으나 사용자 경험 개선에 효과적입니다.

React 앱에서 비디오 지연 로딩을 적용해 페이지 성능을 높이고 사용자 이탈률을 줄여보세요.