3관문. Virtualization (Windowing)

관문 3 / 7

10만 개 아이템 리스트를 가상화하여 보이는 부분만 렌더링되도록 구현하라.

📖 이론 비급

Virtualization: 보이는 것만 그린다

10만 개의 DOM 노드를 한 번에 렌더하면 초기 로딩과 스크롤이 모두 느려진다. 가상화(Windowing)는 현재 뷰포트에 보이는 아이템만 DOM에 유지한다.

@tanstack/virtual: 계산 로직만 제공하는 headless 가상화 라이브러리. useVirtualizer가 각 아이템의 위치와 렌더 여부를 계산하고, 스크롤 컨테이너를 실제 전체 높이로 설정하여 스크롤바를 자연스럽게 유지한다.

⚔️ 수련 코드

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

const ITEMS = Array.from({ length: 100000 }, (_, i) => `아이템 ${i + 1}`);

export default function VirtualList() {
  const parentRef = useRef(null);

  // TODO: useVirtualizer를 사용하여 가상화를 구현하라
  const virtualizer = useVirtualizer({
    count: ITEMS.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,
  });

  return (
    <div ref={parentRef} style={{ height: 400, overflow: 'auto', border: '1px solid' }}>
      {/* TODO: virtualizer.getTotalSize()로 컨테이너 높이 설정 */}
      {/* virtualizer.getVirtualItems()로 보이는 아이템만 렌더 */}
      <p>10만 개 아이템을 여기에 가상화하라</p>
    </div>
  );
}

Open Sandbox