React에서 가상 스크롤링 구현하기 – 개념부터 구현까지 완벽 마스터

React에서 가상 스크롤링 구현하기는 대용량 리스트를 렌더링할 때 성능을 극대적으로 향상시키는 필수 기술입니다. 수천, 수만 개의 항목을 표시해야 하는 상황에서 모든 DOM 요소를 한 번에 렌더링하면 브라우저가 느려지거나 멈출 수 있습니다. 가상 스크롤링은 현재 화면에 보이는 항목만 렌더링하여 메모리 사용량을 줄이고 렌더링 성능을 최적화하는 핵심 알고리즘입니다.

1. 알고리즘 소개 및 개념

가상 스크롤링(Virtual Scrolling)은 ‘윈도잉(Windowing)’ 기법이라고도 불리며, 전체 데이터 중 현재 뷰포트에 보이는 항목만 DOM에 렌더링하는 최적화 기법입니다. 예를 들어 10,000개의 항목이 있는 리스트에서 화면에는 20개만 보인다면, 실제로는 20개 전후의 항목만 DOM에 존재하고 나머지는 렌더링하지 않습니다.

이 알고리즘의 핵심은 스크롤 위치를 추적하여 현재 보이는 범위를 계산하고, 해당 범위의 데이터만 동적으로 렌더링하는 것입니다. 사용자가 스크롤하면 보이는 범위가 변경되고, React는 필요한 항목만 업데이트하여 DOM 조작을 최소화합니다.

2. 동작 원리 상세 설명

가상 스크롤링의 동작 원리는 다음과 같은 핵심 요소로 구성됩니다:

컨테이너 구조

• 외부 컨테이너: 고정된 높이를 가지며 overflow:auto 속성으로 스크롤 가능
• 내부 스페이서: 전체 리스트의 실제 높이를 나타내는 빈 요소 (총 항목 수 × 항목 높이)
• 가시 영역: 실제로 렌더링되는 항목들이 위치하는 영역

계산 과정

1. 스크롤 위치 감지: onScroll 이벤트로 현재 scrollTop 값 추적
2. 시작 인덱스 계산: startIndex = Math.floor(scrollTop / itemHeight)
3. 종료 인덱스 계산: endIndex = startIndex + visibleCount + buffer
4. 렌더링 범위 결정: items.slice(startIndex, endIndex)로 필요한 데이터만 추출
5. 오프셋 적용: transform: translateY()로 항목들을 올바른 위치에 배치

버퍼(buffer)를 추가하면 스크롤 시 빈 공간이 보이는 것을 방지할 수 있습니다. 보통 화면에 보이는 항목 수의 2-3배를 렌더링합니다.

3. 시간/공간 복잡도 분석

시간 복잡도

• 초기 렌더링: O(k) – k는 화면에 보이는 항목 수 (전체 데이터 n과 무관)
• 스크롤 업데이트: O(k) – 보이는 항목만 업데이트
• 전체 리스트 순회: O(n) – 가상 스크롤링 미사용 시

일반적으로 k << n이므로, n=10,000이고 k=20이면 약 500배의 성능 향상을 얻습니다.

공간 복잡도

• DOM 노드: O(k) – 화면에 보이는 항목만 DOM에 존재
• 데이터 저장: O(n) – 전체 데이터는 메모리에 유지
• 메모리 사용량: 일반 렌더링 대비 90-95% 감소 가능

10,000개 항목을 모두 렌더링하면 약 100MB의 메모리를 사용할 수 있지만, 가상 스크롤링을 사용하면 2-5MB로 줄어듭니다.

4. 단계별 구현 과정

Step 1: 기본 구조 설정

먼저 필요한 상태와 ref를 정의합니다:

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

const VirtualScroll = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);
  
  // 화면에 보이는 항목 수 계산
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  
  // 버퍼 추가 (위아래 추가 항목)
  const bufferCount = 3;
  
  // 전체 컨테이너 높이
  const totalHeight = items.length * itemHeight;
  
  return null; // 다음 단계에서 구현
};

Step 2: 렌더링 범위 계산

현재 스크롤 위치를 기반으로 어떤 항목을 렌더링할지 계산합니다:

const VirtualScroll = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);
  
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const bufferCount = 3;
  const totalHeight = items.length * itemHeight;
  
  // 시작 인덱스 (버퍼 포함)
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferCount);
  
  // 종료 인덱스 (버퍼 포함)
  const endIndex = Math.min(
    items.length,
    startIndex + visibleCount + bufferCount * 2
  );
  
  // 실제 렌더링할 항목들
  const visibleItems = items.slice(startIndex, endIndex);
  
  // 항목들의 Y 오프셋
  const offsetY = startIndex * itemHeight;
  
  return null; // 다음 단계에서 구현
};

Step 3: 스크롤 이벤트 핸들러

스크롤 이벤트를 감지하고 성능 최적화를 위해 requestAnimationFrame을 사용합니다:

const VirtualScroll = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);
  const rafId = useRef(null);
  
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const bufferCount = 3;
  const totalHeight = items.length * itemHeight;
  
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferCount);
  const endIndex = Math.min(items.length, startIndex + visibleCount + bufferCount * 2);
  const visibleItems = items.slice(startIndex, endIndex);
  const offsetY = startIndex * itemHeight;
  
  // 스크롤 핸들러
  const handleScroll = (e) => {
    // 이전 RAF 취소
    if (rafId.current) {
      cancelAnimationFrame(rafId.current);
    }
    
    // 다음 프레임에 상태 업데이트
    rafId.current = requestAnimationFrame(() => {
      setScrollTop(e.target.scrollTop);
    });
  };
  
  // 클린업
  useEffect(() => {
    return () => {
      if (rafId.current) {
        cancelAnimationFrame(rafId.current);
      }
    };
  }, []);
  
  return null; // 다음 단계에서 구현
};

Step 4: JSX 렌더링

최종적으로 UI를 렌더링합니다:

const VirtualScroll = ({ items, itemHeight, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);
  const rafId = useRef(null);
  
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const bufferCount = 3;
  const totalHeight = items.length * itemHeight;
  
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferCount);
  const endIndex = Math.min(items.length, startIndex + visibleCount + bufferCount * 2);
  const visibleItems = items.slice(startIndex, endIndex);
  const offsetY = startIndex * itemHeight;
  
  const handleScroll = (e) => {
    if (rafId.current) {
      cancelAnimationFrame(rafId.current);
    }
    rafId.current = requestAnimationFrame(() => {
      setScrollTop(e.target.scrollTop);
    });
  };
  
  useEffect(() => {
    return () => {
      if (rafId.current) {
        cancelAnimationFrame(rafId.current);
      }
    };
  }, []);
  
  return (
    

      {/* 전체 높이를 위한 스페이서 */}
      

      
      {/* 실제 렌더링되는 항목들 */}
      

        {visibleItems.map((item, index) => (
          

            {item.content}
          
        ))}
      
    
  );
};

5. 최적화 방법

1. 가변 높이 항목 지원

모든 항목의 높이가 다를 때는 높이 캐시를 사용합니다:

const VirtualScrollDynamic = ({ items, estimatedItemHeight, containerHeight }) => {
  const [itemHeights, setItemHeights] = useState({});
  const itemRefs = useRef({});
  
  // 항목이 렌더링된 후 높이 측정
  useEffect(() => {
    const newHeights = {};
    Object.keys(itemRefs.current).forEach(index => {
      const element = itemRefs.current[index];
      if (element) {
        newHeights[index] = element.getBoundingClientRect().height;
      }
    });
    setItemHeights(prev => ({ ...prev, ...newHeights }));
  }, [items]);
  
  // 누적 높이 계산
  const getItemOffset = (index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      offset += itemHeights[i] || estimatedItemHeight;
    }
    return offset;
  };
  
  // 구현 계속...
};

2. React.memo로 불필요한 리렌더링 방지

const VirtualItem = React.memo(({ item, style }) => {
  return (
    

      {item.content}
    
  );
}, (prevProps, nextProps) => {
  return prevProps.item.id === nextProps.item.id;
});

3. Intersection Observer 활용

스크롤 이벤트 대신 Intersection Observer를 사용하면 더 효율적입니다:

useEffect(() => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 이미지 지연 로딩 등
        }
      });
    },
    { root: containerRef.current, threshold: 0.1 }
  );
  
  // 관찰 대상 등록
}, []);

4. 디바운싱과 쓰로틀링

빠른 스크롤 시 과도한 업데이트를 방지합니다:

import { throttle } from 'lodash';

const handleScroll = throttle((e) => {
  setScrollTop(e.target.scrollTop);
}, 16); // ~60fps

6. 실전 활용 예제

실제 프로젝트에서 React에서 가상 스크롤링 구현하기를 활용하는 예제입니다:

import React from 'react';
import VirtualScroll from './VirtualScroll';

const UserList = () => {
  // 10,000명의 사용자 데이터
  const users = Array.from({ length: 10000 }, (_, i) => ({
    id: i,
    name: `User ${i + 1}`,
    email: `user${i + 1}@example.com`,
    avatar: `https://i.pravatar.cc/150?img=${i % 70}`
  }));
  
  return (
    

      
사용자 목록 ({users.length.toLocaleString()}명)
       ({
          content: (
            

              
              

                
{user.name}
                
{user.email}
              
            
          )
        }))}
        itemHeight={70}
        containerHeight={600}
      />
    
  );
};

export default UserList;

성능 비교

추가 라이브러리

직접 구현 외에 검증된 라이브러리를 사용할 수도 있습니다:

• react-window: 가볍고 빠른 가상 스크롤링 라이브러리
• react-virtualized: 더 많은 기능을 제공하는 포괄적인 라이브러리
• react-virtual: TanStack의 현대적인 가상 스크롤링 솔루션

// react-window 사용 예제
import { FixedSizeList } from 'react-window';

const Example = () => (
  
    {({ index, style }) => (
      
Item {index}
    )}
  
);

결론

React에서 가상 스크롤링 구현하기는 대용량 데이터를 다루는 모든 웹 애플리케이션에서 필수적인 기술입니다. 이 기법을 마스터하면 사용자 경험을 크게 향상시킬 수 있으며, 메모리 사용량과 렌더링 성능을 획기적으로 개선할 수 있습니다. 기본 원리를 이해하고 프로젝트의 요구사항에 맞게 최적화하여 적용해보세요.