가상화 — 10만 개 리스트를 60fps로 렌더링하기

10만 개 항목 → 10만 개 DOM 노드 → 브라우저 렌더링 폭발

10만 개 데이터 → 화면에 보이는 ~20개만 DOM 노드 생성
스크롤 → 보이는 범위 변경 → DOM 노드 재활용/교체

npm install react-window

import { FixedSizeList } from 'react-window';

function VirtualList({ items }) {
  const Row = ({ index, style }) => (
    <div style={style} className="list-item">
      <span>{items[index].name}</span>
      <span>{items[index].email}</span>
    </div>
  );

  return (
    <FixedSizeList
      height={600}        // 컨테이너 높이
      itemCount={items.length}  // 전체 항목 수
      itemSize={50}       // 각 항목의 고정 높이
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

import { VariableSizeList } from 'react-window';

function ChatMessages({ messages }) {
  const listRef = useRef();

  // 각 메시지의 높이를 계산하는 함수
  const getItemSize = (index) => {
    const message = messages[index];
    // 간단한 높이 추정 (실제로는 더 정교한 계산 필요)
    const lineCount = Math.ceil(message.text.length / 50);
    return 40 + lineCount * 20;
  };

  const Row = ({ index, style }) => (
    <div style={style} className="message">
      <strong>{messages[index].sender}</strong>
      <p>{messages[index].text}</p>
    </div>
  );

  return (
    <VariableSizeList
      height={500}
      itemCount={messages.length}
      itemSize={getItemSize}
      width="100%"
      ref={listRef}
    >
      {Row}
    </VariableSizeList>
  );
}

import { FixedSizeGrid } from 'react-window';

function SpreadsheetView({ data, columns, rows }) {
  const Cell = ({ columnIndex, rowIndex, style }) => (
    <div style={style} className="cell">
      {data[rowIndex]?.[columnIndex] ?? ''}
    </div>
  );

  return (
    <FixedSizeGrid
      columnCount={columns}
      columnWidth={120}
      rowCount={rows}
      rowHeight={35}
      height={600}
      width={800}
    >
      {Cell}
    </FixedSizeGrid>
  );
}

npm install @tanstack/react-virtual

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

function VirtualList({ items }) {
  const parentRef = useRef(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,  // 추정 높이
    overscan: 5,
  });

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

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 80, // 초기 추정치
  // measureElement를 사용하면 실제 DOM 높이를 측정
});

// 각 항목에 measureElement 연결
{virtualizer.getVirtualItems().map((virtualRow) => (
  <div
    key={virtualRow.key}
    ref={virtualizer.measureElement}  // 실제 높이 측정
    data-index={virtualRow.index}
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      transform: `translateY(${virtualRow.start}px)`,
    }}
  >
    <DynamicContent item={items[virtualRow.index]} />
  </div>
))}

function InfiniteVirtualList() {
  const parentRef = useRef(null);
  const [items, setItems] = useState([]);
  const [hasNextPage, setHasNextPage] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const fetchNextPage = async () => {
    if (isLoading || !hasNextPage) return;
    setIsLoading(true);

    const page = Math.floor(items.length / 50);
    const newItems = await api.getItems({ page, size: 50 });

    setItems((prev) => [...prev, ...newItems.data]);
    setHasNextPage(newItems.hasMore);
    setIsLoading(false);
  };

  const allItems = hasNextPage ? [...items, null] : items; // null = 로딩 표시용

  const virtualizer = useVirtualizer({
    count: allItems.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 60,
    overscan: 5,
  });

  // 마지막 항목이 보이면 다음 페이지 로드
  useEffect(() => {
    const lastItem = virtualizer.getVirtualItems().at(-1);
    if (!lastItem) return;

    if (lastItem.index >= items.length - 1 && hasNextPage && !isLoading) {
      fetchNextPage();
    }
  }, [virtualizer.getVirtualItems(), hasNextPage, isLoading, items.length]);

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map((virtualRow) => {
          const item = allItems[virtualRow.index];
          return (
            <div
              key={virtualRow.key}
              style={{
                position: 'absolute',
                top: 0,
                width: '100%',
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
              {item ? (
                <ItemRow item={item} />
              ) : (
                <div className="loading">로딩 중...</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

<div role="list" aria-label={`${items.length}개 항목`}>
  {virtualizer.getVirtualItems().map((virtualRow) => (
    <div role="listitem" aria-setsize={items.length} aria-posinset={virtualRow.index + 1}>
      {/* ... */}
    </div>
  ))}
</div>