빠르고 유연한 UX 구축,가상화 그리드

이 프로젝트에서는 @tanstack/virtual을 사용하여 가상화된 그리드를 구현하는 방법과 그리드 항목의 종횡비를 유지하면서 가상화를 구현하는 방법에 대한 코드 예제를 제공합니다.

다양한 기능 & 효율적인 성능

TanStack Virtual은 기존 react-window, react-virtualized와 다https://tanstack.com/virtual/latest르게 효율적인 성능과 유연성을 모두 갖춘 강력한 가상화 솔루션입니다. 60FPS로 스크롤 가능한 대규모 요소 목록을 효율적으로 처리하고, 표시되는 DOM 노드만 가상화하는 동시에 마크업과 스타일을 100% 제어합니다. 번들 사이즈가 작으면서 가상화 작업 중 최고의 라이브러리로 사랑받고 있습니다.

자유로운 디자인을 위한 설계

Headless Virtualization은 마크업, 스타일 및 구성 요소를 제어할 수 있다는 것을 의미합니다. 상상할 수 있는 가장 아름다운 UI를 자유롭게 디자인하고 구현하기 어려운 부분은 TanStack Virtual 라이브러리에서 처리하고 있습니다.

작은 번들 크기와 강력한 성능

다른 라이브러리의 작은 번들 크기에 속지 마세요. TanStack Virtual은 모든 바이트를 활용하여 강력한 성능을 제공합니다. 요즘은 60FPS가 기본이고, TanStack Virtual는 매끄러운 UX를 다른 어떤 희생도 감수할 생각이 없습니다.

최대 수준의 조합 가능성

단일 기능/후크를 사용하면 수직, 수평, 그리드 스타일 레이아웃을 위한 무한한 가상화를 얻을 수 있습니다. API는 작지만(말 그대로 1개의 기능), 구성 가능성은 그렇지 않습니다.

Tanstack Virtual Grid Sample

TanStack Virtual을 사용하여 제작된 결과물입니다. 640px 이상 사이즈에서는 16/9 종횡비를 유지하면서 640px 이하 사이즈에서는 1/1 사이즈로 동작합니다.