TanStack Virtual = “10,000개 리스트인데, 화면에 보이는 10~20개만 DOM에 그려 주는 도구”
현재 땡큐 캠핑에 listCard에 도입
InfinityQueryVisualScrollList.tsx가 바로 그것입니다.
10층 건물에 10,000호가 있다고 상상해 보세요.
진짜 데이터는 10,000개지만, DOM(화면에 그린 것)은 10~20개만 유지합니다.
| 설명 | |
|---|---|
| 정체 | 리스트/그리드 가상화 라이브러리 |
| Headless | UI 안 줌. 위치·개수만 계산, 마크업은 내가 짬 |
| 프레임워크 | React, Vue, Solid… (@tanstack/react-virtual) |
| 역할 | “지금 스크롤 위치면 몇 번~몇 번 항목을 그릴지” 알려 줌 |
앞서 말씀드린 프레임워크 vs 라이브러리 관점이면: