React와 Intersection Observer API: 스크롤 성능 최적화와 사용자 경험 개선

1. 실무에서 겪는 스크롤 성능 문제, 어떻게 해결하고 계신가요?

안녕하세요, 5년차 프론트엔드 개발자입니다. 개발을 하다 보면 사용자가 많은 콘텐츠를 스크롤할 때 발생하는 성능 저하 문제에 직면하는 경우가 많습니다. 특히 이미지, 컴포넌트 등이 페이지에 로드될 때 브라우저 렌더링 부하가 커지면서 화면이 버벅거리거나, 심지어 멈추는 현상까지 경험해보셨을 겁니다. 저 역시 과거에 수백 개의 상품 목록을 한 페이지에 보여줘야 하는 서비스에서, 스크롤 시 발생하는 렌더링 지연 때문에 사용자 불만과 성능 이슈를 겪었던 경험이 있습니다. 초기에는 단순히 컴포넌트 렌더링 최적화나 가상화 라이브러리 도입을 고려했지만, 근본적인 해결책은 '필요할 때만 요소를 로드하고 렌더링하는 것'이었습니다. 그리고 이 문제를 가장 효율적으로 해결할 수 있는 강력한 도구가 바로 'Intersection Observer API'입니다. 오늘은 React 환경에서 Intersection Observer API를 활용하여 스크롤 성능을 최적화하고 사용자 경험을 개선하는 실질적인 방법들을 코드 예제와 함께 깊이 있게 살펴보겠습니다.

2. Intersection Observer API, 왜 필요하며 어떻게 활용할까?

2.1 Intersection Observer API란?

Intersection Observer API는 특정 DOM 요소가 뷰포트(viewport)나 다른 요소와 교차(intersection)하는지 여부를 비동기적으로 감지하는 브라우저 API입니다. 기존에는 스크롤 이벤트 리스너를 직접 등록하고 getBoundingClientRect() 등을 사용하여 요소의 위치를 계속해서 계산해야 했습니다. 하지만 이 방식은 스크롤 이벤트가 자주 발생할 때마다 DOM을 조작하게 되어 성능 저하의 주된 원인이 되었습니다. Intersection Observer API는 이러한 부담을 덜어줍니다. 브라우저가 자체적으로 최적화된 방식으로 교차 여부를 감지해주므로, 훨씬 효율적인 성능을 제공합니다.

2.2 Intersection Observer API의 주요 기능

• root: 감시 대상 요소의 부모 요소. 지정하지 않으면 뷰포트가 기본값입니다.
• rootMargin: root 요소의 경계를 확장하거나 축소합니다. CSS 마진과 유사하게 작동합니다.
• threshold: 감시 대상 요소가 root와 얼마나 교차했을 때 콜백 함수를 실행할지 결정하는 값입니다. 0.0(전혀 보이지 않음)부터 1.0(완전히 보임)까지의 범위이며, 배열로 여러 값을 지정할 수 있습니다.

2.3 React에서 Intersection Observer API 활용 시나리오

Intersection Observer API는 다음과 같은 다양한 시나리오에서 유용하게 활용될 수 있습니다.

• 지연 로딩 (Lazy Loading): 화면에 보이지 않는 이미지나 컴포넌트를 스크롤 시점에 맞춰 로드하여 초기 로딩 성능을 개선합니다.
• 무한 스크롤 (Infinite Scrolling): 사용자가 페이지 하단으로 스크롤하면 새로운 콘텐츠를 동적으로 로드하여 끊김 없는 사용자 경험을 제공합니다.
• 애니메이션 트리거: 요소가 화면에 나타날 때 특정 애니메이션을 적용합니다.
• 스크롤 기반 네비게이션: 특정 섹션에 도달했을 때 메뉴 항목을 활성화합니다.

3. React에서 Intersection Observer API 적용하기

3.1 지연 로딩 (Lazy Loading) 구현

이미지를 지연 로딩하는 것은 웹 성능 최적화의 대표적인 사례입니다. 초기 로딩 시 보이지 않는 이미지까지 모두 로드하는 대신, 사용자가 스크롤하여 이미지가 보일 때 로드하도록 하여 초기 페이지 로딩 속도를 크게 향상시킬 수 있습니다.

기존 방식 (Intersection Observer API 미사용):

1function ImageComponent({ src, alt }) {
2  return <img src={src} alt={alt} loading="lazy" />;
3}
4
5// 모든 이미지가 초기 로딩 시점에 로드될 수 있음 (loading="lazy"는 브라우저별 지원 편차가 있을 수 있음)
6function MyComponentWithManyImages({ images }) {
7  return (
8    <div>
9      {images.map((img, index) => (
10        <ImageComponent key={index} src={img.url} alt={img.alt} />
11      ))}
12    </div>
13  );
14}

Intersection Observer API 활용 방식:

이 방식에서는 data-src 속성에 실제 이미지 경로를 저장하고, src에는 플레이스홀더나 빈 문자열을 넣습니다. Intersection Observer가 해당 요소가 보이기 시작하면 src 속성을 data-src의 값으로 변경하여 이미지를 로드합니다.

1import React, { useRef, useEffect } from 'react';
2
3function LazyImage({ src, alt }) {
4  const imageRef = useRef(null);
5
6  useEffect(() => {
7    const observer = new IntersectionObserver((entries, observer) => {
8      entries.forEach(entry => {
9        if (entry.isIntersecting) {
10          const img = entry.target;
11          img.src = img.dataset.src;
12          img.removeAttribute('data-src');
13          observer.unobserve(img);
14        }
15      });
16    }, {
17      root: null, // 뷰포트
18      rootMargin: '0px',
19      threshold: 0.1 // 10% 보이면 로드
20    });
21
22    const imgElement = imageRef.current;
23    if (imgElement) {
24      observer.observe(imgElement);
25    }
26
27    return () => {
28      if (imgElement) {
29        observer.unobserve(imgElement);
30      }
31    };
32  }, []);
33
34  return <img ref={imageRef} data-src={src} alt={alt} style={{ minHeight: '200px', backgroundColor: '#eee' }} />;
35}
36
37function MyComponentWithLazyImages({ images }) {
38  return (
39    <div>
40      {images.map((img, index) => (
41        <LazyImage key={index} src={img.url} alt={img.alt} />
42      ))}
43    </div>
44  );
45}

비교:

구분	기존 방식 (일반 <img> 또는 loading="lazy")	Intersection Observer API 활용 방식
초기 로딩 성능	모든 이미지가 로드될 가능성 있음	보이지 않는 이미지는 로드되지 않아 초기 로딩 속도 향상
스크롤 시 성능	loading="lazy" 지원 시 브라우저 최적화	직접 제어 가능, 뷰포트 근접 시 로드하여 렌더링 부하 분산
구현 복잡성	낮음	중간 (Observer 설정 및 관리 필요)
호환성	loading="lazy"는 최신 브라우저 지원	브라우저 API 지원 (IE 제외 대부분 지원)
주요 활용	이미지 지연 로딩	이미지, 컴포넌트, 비디오 등 다양한 리소스 지연 로딩, 무한 스크롤, 애니메이션

3.2 무한 스크롤 (Infinite Scrolling) 구현

무한 스크롤은 사용자가 페이지 하단으로 스크롤할 때마다 자동으로 콘텐츠를 불러오는 패턴입니다. 사용자 경험을 크게 향상시키지만, 구현이 잘못되면 성능 문제를 야기할 수 있습니다. Intersection Observer API를 사용하면 스크롤 이벤트 리스너를 직접 달지 않고도, 특정 요소(예: 로딩 표시기)가 뷰포트에 들어왔을 때 새로운 데이터를 요청하도록 쉽게 구현할 수 있습니다.

1import React, { useState, useEffect, useRef } from 'react';
2
3function InfiniteScrollList() {
4  const [items, setItems] = useState([]);
5  const [page, setPage] = useState(1);
6  const [isLoading, setIsLoading] = useState(false);
7  const loaderRef = useRef(null);
8
9  const loadMoreItems = async () => {
10    if (isLoading) return;
11    setIsLoading(true);
12    // 실제 API 호출 로직 (예: fetch('/api/items?page=' + page))
13    await new Promise(resolve => setTimeout(resolve, 1000)); // 더미 로딩
14    const newItems = Array.from({ length: 10 }, (_, i) => `Item ${items.length + i + 1}`);
15    setItems(prevItems => [...prevItems, ...newItems]);
16    setPage(prevPage => prevPage + 1);
17    setIsLoading(false);
18  };
19
20  useEffect(() => {
21    loadMoreItems(); // 초기 로드
22  }, []);
23
24  useEffect(() => {
25    const observer = new IntersectionObserver((entries) => {
26      entries.forEach(entry => {
27        if (entry.isIntersecting && !isLoading) {
28          loadMoreItems();
29        }
30      });
31    }, {
32      root: null,
33      rootMargin: '0px',
34      threshold: 0.1
35    });
36
37    const loaderElement = loaderRef.current;
38    if (loaderElement) {
39      observer.observe(loaderElement);
40    }
41
42    return () => {
43      if (loaderElement) {
44        observer.unobserve(loaderElement);
45      }
46    };
47  }, [isLoading]); // isLoading 변경 시 observer 재설정
48
49  return (
50    <div>
51      <ul>
52        {items.map((item, index) => (
53          <li key={index} style={{ padding: '20px', borderBottom: '1px solid #ccc' }}>{item}</li>
54        ))}
55      </ul>
56      <div ref={loaderRef} style={{ height: '100px', textAlign: 'center', lineHeight: '100px' }}>
57        {isLoading ? 'Loading more items...' : ''}
58      </div>
59    </div>
60  );
61}
62
63export default InfiniteScrollList;

이 예제에서는 loaderRef를 사용하여 스크롤 시 로딩을 트리거할 요소를 가리킵니다. 이 요소가 뷰포트에 들어오면 loadMoreItems 함수가 호출되어 새로운 데이터를 불러옵니다. isLoading 상태를 관리하여 중복 호출을 방지하는 것이 중요합니다.

3.3 커스텀 훅으로 재사용성 높이기

Intersection Observer API 로직은 반복적으로 사용될 수 있으므로, 커스텀 훅으로 만들어 관리하면 코드의 재사용성과 가독성을 높일 수 있습니다.

1import { useRef, useEffect, useState } from 'react';
2
3function useIntersectionObserver(options = {}) {
4  const [entry, updateEntry] = useState(null);
5  const ref = useRef(null);
6
7  const { root, rootMargin, threshold } = options;
8
9  useEffect(() => {
10    const element = ref.current;
11    if (!element) return;
12
13    const observer = new IntersectionObserver(([entry]) => {
14      updateEntry(entry);
15    }, { root, rootMargin, threshold });
16
17    observer.observe(element);
18
19    return () => {
20      if (element) {
21        observer.unobserve(element);
22      }
23    };
24  }, [root, rootMargin, threshold]); // 옵션 변경 시 observer 재생성
25
26  return [ref, entry];
27}
28
29export default useIntersectionObserver;
30
31// 사용 예시:
32function MyLazyComponent() {
33  const [ref, isIntersecting] = useIntersectionObserver({
34    threshold: 0.5 // 50% 보일 때
35  });
36
37  return (
38    <div ref={ref} style={{ height: '500px', backgroundColor: isIntersecting ? 'lightblue' : 'lightgray' }}>
39      {isIntersecting ? 'Now Visible!' : 'Scroll to see me'}
40    </div>
41  );
42}

이 useIntersectionObserver 훅을 사용하면 컴포넌트에서 Intersection Observer 로직을 분리하여 훨씬 깔끔하게 구현할 수 있습니다. isIntersecting 값을 통해 요소의 가시성 여부를 직접적으로 받아와 조건부 렌더링이나 애니메이션 등에 활용할 수 있습니다.

4. 핵심 정리 및 체크리스트

Intersection Observer API는 React 애플리케이션에서 스크롤 성능을 최적화하고 사용자 경험을 개선하는 데 매우 효과적인 도구입니다. 특히 지연 로딩, 무한 스크롤과 같은 패턴 구현 시 복잡한 스크롤 이벤트 핸들링 없이도 효율적으로 구현할 수 있도록 돕습니다. 브라우저가 자체적으로 최적화된 방식으로 교차를 감지하므로, 기존의 scroll 이벤트 리스너 방식보다 훨씬 성능 부담이 적습니다.

핵심 정리:

• 성능 개선: 보이지 않는 요소를 로드하지 않아 초기 로딩 속도 향상 및 렌더링 부하 감소
• UX 향상: 부드러운 스크롤 경험 제공, 사용자 대기 시간 감소
• 효율적인 구현: 복잡한 스크롤 이벤트 핸들링 불필요, API 제공 기능 활용
• 다양한 활용: 지연 로딩, 무한 스크롤, 애니메이션 등

체크리스트:

• 페이지 로딩 시 많은 이미지나 컴포넌트가 렌더링되어 성능 저하가 발생하는가?
• 사용자가 콘텐츠를 스크롤할 때 화면이 버벅거리거나 끊기는 현상이 발생하는가?
• Intersection Observer API를 사용하여 보이지 않는 요소는 로드하지 않도록 구현했는가? (지연 로딩)
• 사용자 경험을 해치지 않으면서 콘텐츠를 동적으로 로드하는가? (무한 스크롤)
• root, rootMargin, threshold 옵션을 적절하게 설정하여 최적의 성능과 UX를 달성했는가?
• Intersection Observer 로직을 커스텀 훅으로 분리하여 코드의 재사용성과 유지보수성을 높였는가?
• observer.unobserve()를 사용하여 더 이상 관찰하지 않는 요소를 정리해주어 메모리 누수를 방지했는가?

Intersection Observer API를 잘 활용한다면, 사용자가 체감하는 웹 애플리케이션의 성능과 만족도를 크게 높일 수 있을 것입니다. 지금 바로 여러분의 프로젝트에 적용해보세요!