큰 데이터와 적은 DOM: 목록 가상화

이럴 때 필요해요

데이터 정렬이나 필터 계산을 아무리 빠르게 만들어도, 수만 개의 행을 한꺼번에 브라우저 DOM으로 만들면 화면이 느려지기 때문에 계산과 화면 표시 비용을 나누어 다루어야 합니다.

어떻게 동작하나요?

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

// 가정: rowHeight > 0, 나머지는 음수가 아니며 overscan은 정수
const first = Math.floor(scrollTop / rowHeight);
const start = Math.min(items.length, Math.max(0, first - overscan));
const end = Math.min(
  items.length,
  Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan
);
const visibleItems = items.slice(start, end);

끝 인덱스 end는 slice에서 포함되지 않는 끝 경계입니다. 예를 들어 행 높이가 30px일 때 scrollTop=1, viewportHeight=30이면 0번 행과 1번 행이 화면에 걸쳐 보이므로 end는 2가 되어 두 행이 모두 포함됩니다(overscan=0 기준). 이 코드는 표시할 인덱스 범위만 계산하는 예제이며 실제 가상화에는 전체 스크롤 높이 유지와 초점 처리도 함께 필요합니다.

자주 헷갈리는 포인트

• 무한 스크롤은 스크롤할 때 데이터를 서버에서 추가로 받아 오는 방식이고, 가상화는 화면에 그리는 DOM 개수를 제한하는 방식이므로 둘은 같은 기능이 아닙니다.
• 목록을 가상화해 DOM 개수를 줄이더라도, 매번 전체 배열을 비효율적으로 정렬·필터링하는 계산 비용 자체가 저절로 사라지지는 않습니다.

내 말로 설명해 보기

계산 시간은 짧은데 브라우저 Layout 시간이 길게 나오는 상황이라면, Worker·메모이제이션·페이지네이션·가상화를 어떤 기준으로 비교해 선택할까요?