소개

TanStack Virtual은 JS/TS, React, Vue, Svelte, Solid, Lit, Angular에서 긴 요소 목록을 가상화하는 헤드리스 UI 유틸리티입니다. 컴포넌트가 아니므로 마크업이나 스타일을 제공하거나 대신 렌더링하지 않습니다. 따라서 약간의 마크업과 스타일을 직접 작성해야 하지만, 스타일과 디자인 및 구현을 100% 제어할 수 있습니다.

버추얼라이저

TanStack Virtual의 핵심은 Virtualizer입니다. 버추얼라이저는 세로축(기본값) 또는 가로축을 기준으로 배치할 수 있으며, 두 축 설정을 조합하면 세로, 가로뿐 아니라 그리드 형태의 가상화도 구현할 수 있습니다.

채팅, AI 스트림, 로그 및 기타 역방향 피드는 채팅 가이드를 참조합니다.

다음은 React에서 TanStack Virtual을 사용해 div 안의 긴 목록을 가상화하는 간단한 예제입니다.

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

function App() {
  // The scrollable element for your list
  const parentRef = React.useRef(null)

  // The virtualizer
  const rowVirtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
  })

  return (
    <>
      {/* The scrollable element for your list */}
      <div
        ref={parentRef}
        style={{
          height: `400px`,
          overflow: 'auto', // Make it scroll!
        }}
      >
        {/* The large inner element to hold all of the items */}
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: '100%',
            position: 'relative',
          }}
        >
          {/* Only the visible items in the virtualizer, manually positioned to be in view */}
          {rowVirtualizer.getVirtualItems().map((virtualItem) => (
            <div
              key={virtualItem.key}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
            >
              Row {virtualItem.index}
            </div>
          ))}
        </div>
      </div>
    </>
  )
}

더 많은 예제를 자세히 살펴보겠습니다.