How to Implement Virtual Scrolling: Claude Code 활용 가이드

仮想스크롤が必要な場面

数千〜数万件の리스트を표시する際、모든DOM要素を描画すると브라우저の성능が大幅に低下します。仮想스크롤（ウィンドウイング）は、画面に見えている部分だけをDOMに描画する手法です。Claude Code를 활용하면 이高度な최적화技術を효율적으로구현할 수 있습니다。

기본적인仮想스크롤の구현

> 固定高さアイテムの仮想스크롤컴포넌트を作って。
> 10万件の리스트でもスムーズに動くようにして。

import { useState, useRef, useCallback, useMemo } from 'react';

interface VirtualListProps<T> {
  items: T[];
  itemHeight: number;
  containerHeight: number;
  overscan?: number;
  renderItem: (item: T, index: number) => React.ReactNode;
}

function VirtualList<T>({
  items, itemHeight, containerHeight, overscan = 5, renderItem,
}: VirtualListProps<T>) {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const totalHeight = items.length * itemHeight;
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
  const endIndex = Math.min(items.length, startIndex + visibleCount + overscan * 2);

  const visibleItems = useMemo(
    () => items.slice(startIndex, endIndex),
    [items, startIndex, endIndex]
  );

  const handleScroll = useCallback(() => {
    if (containerRef.current) {
      setScrollTop(containerRef.current.scrollTop);
    }
  }, []);

  return (
    <div
      ref={containerRef}
      onScroll={handleScroll}
      style={{ height: containerHeight, overflow: 'auto' }}
      role="list"
      aria-label={`リスト（全${items.length}件）`}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>
        {visibleItems.map((item, i) => {
          const index = startIndex + i;
          return (
            <div
              key={index}
              role="listitem"
              style={{
                position: 'absolute',
                top: index * itemHeight,
                height: itemHeight,
                width: '100%',
              }}
            >
              {renderItem(item, index)}
            </div>
          );
        })}
      </div>
    </div>
  );
}

可変高さアイテムへの대응

> アイテムごとに高さが異なる仮想스크롤にも대응して。

class DynamicSizeManager {
  private heights: Map<number, number> = new Map();
  private estimatedHeight: number;

  constructor(estimatedHeight: number) {
    this.estimatedHeight = estimatedHeight;
  }

  setHeight(index: number, height: number) {
    this.heights.set(index, height);
  }

  getHeight(index: number): number {
    return this.heights.get(index) ?? this.estimatedHeight;
  }

  getOffset(index: number): number {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      offset += this.getHeight(i);
    }
    return offset;
  }

  getTotalHeight(itemCount: number): number {
    return this.getOffset(itemCount);
  }

  findIndexAtOffset(offset: number, itemCount: number): number {
    let current = 0;
    for (let i = 0; i < itemCount; i++) {
      current += this.getHeight(i);
      if (current > offset) return i;
    }
    return itemCount - 1;
  }
}

高さ自動計測컴포넌트

import { useRef, useEffect } from 'react';

function MeasuredItem({ index, onMeasure, children }: {
  index: number;
  onMeasure: (index: number, height: number) => void;
  children: React.ReactNode;
}) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      const observer = new ResizeObserver(([entry]) => {
        onMeasure(index, entry.contentRect.height);
      });
      observer.observe(ref.current);
      return () => observer.disconnect();
    }
  }, [index, onMeasure]);

  return <div ref={ref}>{children}</div>;
}

TanStack Virtualの활용

より本格的な구현にはTanStack Virtualが便利です。

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualizedList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 10,
  });

  return (
    <div ref={parentRef} style={{ height: 600, overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize(), position: 'relative' }}>
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              transform: `translateY(${virtualItem.start}px)`,
              width: '100%',
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

정리

Claude Code를 활용하면 固定高さ・可変高さの仮想스크롤から、TanStack Virtualの활용まで효율적으로구현할 수 있습니다。無限스크롤との組み合わせは無限스크롤구현を、全般的な성능改善は성능최적화를 참고하세요.

TanStack Virtual의 상세 정보는TanStack Virtual공식 문서를 확인하세요.