TanStack Virtual은 대용량 리스트, 그리드, 테이블을 효율적으로 렌더링하기 위한 가상화(virtualization) 라이브러리이다. React, Vue, Svelte, Solid, Angular 등 다양한 프레임워크를 지원하며, 핵심 철학은 "로직은 라이브러리가, UI는 개발자가"라는 Headless UI 접근이다. TanStack Query, TanStack Table과 동일한 생태계 내에서 각각 독립적인 역할을 맡고 있으며, 현재 React 생태계에서 가장 많이 사용되는 virtualization 라이브러리 중 하나이다. npm 기준 주당 약 7.4M 다운로드를 기록하고 있다.
10,000개의 아이템이 있는데, 화면에는 고작 20개밖에 보이지 않는 상황을 생각해보자. 채팅 메시지 리스트, 상품 목록, 데이터 테이블 등 아주 흔한 시나리오이다. 이때 가상화란, 사용자의 화면에 실제로 보이는 아이템과 그 주변의 작은 버퍼만 DOM에 렌더링하고, 스크롤할 때마다 라이브러리가 동적으로 DOM 엘리먼트를 교체하는 것을 말한다.
기차의 차량을 연결하는 방식과 비슷하다. 열차 전체가 한꺼번에 역에 들어오지 않고, 지나가는 차량만 한 구간의 역을 지난다. DOM도 마찬가지로, 스크롤 위치에 따라 필요한 차량(아이템)만 기차(DOM)에 연결되고 빠진다.
가상 스크롤이란 단어를 하나씩 뜻해보면 이렇다. "가상(Virtual)"은 실제로 존재하지 않는다는 의미이고, "스크롤(Scroll)"은 사용자가 스크롤하는 것처럼 느낀다는 뜻이다. 즉, 실제 DOM 노드는 적은데 스크롤 경험은 전체 리스트처럼을 만드는 것이다.
Virtual Scroll, Virtualization, Windowing는 다 같은 개념이지만 관점이 약간 다르다.
JS 객체 10,000개를 메모리에 두는 것은 거의 문제가 없다. 배열 하나에 객체 만개 정도면 JS 엔진이 아무거나 처리할 수 있는 수준이다. 근데 DOM 노드 10,000개를 렌더링하는 것은 완전히 다른 얘기이다. DOM 노드 하나는 단순한 JS 객체가 아니라, layout 정보, 스타일 계산, 이벤트 리스너, 렌더링 트리의 한 조각 등 수백 개의 속성을 가진 무거운 존재이다.
JS 메모리: { id: 1, name: "..." } × 10,000개 → 가벼운 데이터, 문제 없음
DOM: <div>...</div> × 10,000개 → 극도로 무거운 노드, 퍼포던스 폭발