Virtual Scroll

어려움

대량의 데이터를 효율적으로 렌더링하는 가상 스크롤

#scroll#performance#optimization

라이브 데모

Item 1 / 1000
Item 2 / 1000
Item 3 / 1000
Item 4 / 1000
Item 5 / 1000
Item 6 / 1000

코드

VirtualScroll.tsx
const ITEM_HEIGHT = 50;
const VISIBLE_ITEMS = 5;

export const VirtualScroll = () => {
  const [scrollTop, setScrollTop] = useState(0);
  const totalItems = 1000;

  const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
  const endIndex = Math.min(totalItems - 1, startIndex + VISIBLE_ITEMS);

  const items = [];
  for (let i = startIndex; i <= endIndex; i++) {
    items.push(i);
  }

  return (
    <div
      className="virtual-scroll-container"
      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
      style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }}
    >
      <div style={{ height: totalItems * ITEM_HEIGHT }}>
        <div style={{ transform: `translateY(${startIndex * ITEM_HEIGHT}px)` }}>
          {items.map((item) => (
            <div key={item} style={{ height: ITEM_HEIGHT }}>
              Item {item + 1} / {totalItems}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};