💭 데이터 리스트 가상화 (Virtualization)

수천 개의 데이터를 한 화면에 “한 번에” 렌더링하지 않는 이유

---

💭 들어가며

웹 서비스가 커질수록 “리스트”는 폭발적으로 늘어납니다.
상품 목록, 알림함, 채팅 메시지, 피드, 로그 — 모두 리스트 형태입니다.

그런데 리스트 아이템이 1,000개만 넘어도 브라우저는 숨이 찹니다.
스크롤이 버벅이고, 메모리 사용량이 치솟고, TTI(대화 가능 시점)은 지연됩니다.

이때 등장하는 것이 바로 데이터 리스트 가상화(Data List Virtualization)입니다.
한마디로 말하면 “보이는 만큼만 렌더링한다”는 기술이죠.

---

💭 렌더링은 ‘보이는 것보다 더 많다’

일반적인 리스트 컴포넌트는 이렇게 동작합니다.

function List({ items }) {
  return (
    <div>
      {items.map((item) => (
        <div className="row" key={item.id}>
          {item.title}
        </div>
      ))}
    </div>
  );
}

데이터가 1,000개라면 <div>가 1,000개 생성됩니다.
하지만 실제로 사용자가 한눈에 볼 수 있는 항목은 10~15개에 불과하죠.

이런 상황에서 브라우저는 다음과 같은 일을 합니다:

단계	비용	설명
Layout	높이·폭 계산	모든 1,000개 DOM 요소의 레이아웃 계산
Paint	픽셀 그리기	보이지 않는 영역도 페인트 큐에 포함
Memory	유지비용	각 노드의 참조, 스타일, 이벤트 리스너 유지
JS Reflow	연쇄효과	스크롤 시 매번 스타일·레이아웃 재계산

결과적으로 스크롤이 버벅이고,
모바일에서는 렌더링 중단(Frozen Frame)이 발생하기도 합니다.

• DOM 노드 증가에 따라 JS Heap과 FPS가 주기적으로 상승·하락
• 렌더링 부하가 누적되며 브라우저가 Reflow/Repaint를 반복하는 패턴 확인
  👉 “DOM이 많아질수록 브라우저의 렌더링 비용이 급격히 증가한다”

---

💭 “가상화(Virtualization)”란 무엇인가?

데이터 리스트 가상화는 다음 한 문장으로 요약됩니다.

“보이는 영역(뷰포트) + 주변 버퍼만 렌더링하고, 나머지는 가짜 높이로 대체한다.”

즉, 실제 DOM에는 일부만 존재하지만,
브라우저는 전체 스크롤 높이를 가상으로 계산해 마치 전부 있는 것처럼 보여줍니다.

동작 개념

스크롤 상태	실제 DOM 구성
초기	index 0~15 항목만 렌더링
아래로 스크롤	index 10~25 항목만 DOM 유지, 나머지는 제거
끝까지 스크롤	index 985~1000 항목만 남음

• 왼쪽(Regular Scrolling): 리스트의 모든 아이템(item 998~item 1006)이 실제 DOM에 렌더링되어 있어, 항목이 많아질수록 레이아웃 계산과 페인트 비용이 급증합니다.
• 오른쪽(Virtualized Scrolling): 현재 화면(visible viewport) 안의 항목(item 1000~item 1005)만 실제 DOM에 존재하며, 위아래 항목은 존재하지 않거나 가상의 패딩 공간으로 대체됩니다.
  👉 “보이는 부분만 렌더링”함으로써 브라우저의 렌더링 부하를 크게 줄이고 FPS를 안정적으로 유지할 수 있습니다.

---

💭 브라우저는 이렇게 처리한다 (작동 원리)

리스트 가상화는 세 가지 핵심 원리로 작동합니다.

① Viewport 계산

• 현재 스크롤 위치(scrollTop)와 화면 높이(clientHeight)를 이용해
  “지금 보여줘야 할 항목의 인덱스 범위”를 계산합니다.
• 예: scrollTop=500이면 startIndex=10, endIndex=25 정도로 계산

② 가짜 컨테이너 높이 유지

• 실제 렌더링된 항목 외에도,
  리스트 전체 높이를 유지하기 위해 상단/하단에 padding element(빈 div)를 둡니다.
• 이렇게 하면 스크롤바 길이는 실제 전체 데이터와 동일하게 보입니다.

③ 항목 재활용(Recycling)

• 스크롤할 때마다 DOM을 새로 만들지 않고, 기존 노드의 위치와 내용만 교체합니다.
• 즉, DOM 수는 일정하게 유지되며 스크롤만 가상적으로 “이동”합니다.
  
  브라우저 렌더링 파이프라인 (Critical Rendering Path)
• Network 단계: HTML, CSS, JS 파일이 다운로드됨
• DOM & CSSOM 생성: HTML → DOM, CSS → CSSOM 구조로 파싱
• Render Tree 결합: 브라우저가 어떤 요소를 어떤 스타일로 그릴지 결정
• Layout: 각 요소의 크기와 위치를 계산
• Paint: 픽셀 단위로 화면에 실제로 그려짐
  👉 Virtualization은 이 중 Layout → Paint 구간에서의 작업량을 줄여, 브라우저가 모든 리스트 아이템을 매번 다시 계산하지 않도록 하여 스크롤 성능을 향상시키는 핵심 최적화 방식입니다.

---

💭 구현 방식 비교

방식	설명	대표 라이브러리	장점	주의사항
Fixed Height	항목의 높이가 일정	react-window	계산 단순, 빠름	동적 높이 불가
Dynamic Height (Measured)	높이를 측정/캐싱	react-virtualized	다양한 UI 지원	구현 복잡
Infinite Scroll + Virtualization	비동기 데이터 로딩 병합	react-virtualized + fetch	UX 부드러움	경계 관리 필요

---

💭 렌더링 병목 구간 예시

Virtualization 적용 전 렌더링 병목 구간 (DevTools Performance Timeline)

• 노란색(Rendering): Layout 및 스타일 재계산(Recalculate Style) 단계 — DOM이 많을수록 빈번히 발생
• 빨간색(Painting): 픽셀을 다시 그리는 과정(Repaint) — 스크롤이나 화면 갱신 시 자주 호출
• 보라색(Scripting): JavaScript 로직 실행
  👉 Rendering과 Painting이 촘촘히 반복되는 것은 브라우저가 매 프레임마다 화면 전체를 다시 그리는 비효율적인 상태임을 의미합니다.
  👉 Virtualization을 적용하면 이 과정 중 불필요한 Layout/Paint 호출이 제거되어, 렌더링 부하가 줄고 FPS가 안정적으로 유지됩니다.

---

💭 장단점

구분
✅ 장점	- DOM 렌더링 최소화 - 메모리 사용량 감소 - 모바일 스크롤 프레임 유지 - 초기 로드 속도 향상
⚠️ 단점	- SEO(검색엔진)가 전체 데이터 접근 불가 - 키보드 포커스 이동 시 항목 언마운트 문제 - 동적 높이 항목에서 위치 계산 어려움

🧭 Tip:
가상화는 “렌더링 성능 최적화”이지, 데이터 요청 최적화는 아닙니다.
API 호출은 별도로 페이지네이션·캐싱과 함께 관리해야 합니다.

---

💭 실제 적용 시 고려 사항

1. 항목 높이

• 고정 높이면 react-window
• 유동 높이면 react-virtualized
• 가변 콘텐츠는 CellMeasurer 활용

2. 스크롤 컨테이너 구조

• 반드시 overflow: auto 또는 scroll이 지정된 부모 필요
• 상하 padding element로 스크롤 높이 보정

3. A11y (접근성)

• 보이지 않는 항목은 스크린리더 탐색 불가
• 가상화 시 aria-live 영역으로 시각적/논리적 순서 보정

4. SEO

• 검색엔진 크롤러는 JS 실행 없이 HTML만 읽을 수 있음 → SSR 또는 CSR 하이브리드 전략 필요

5. 테스트 포인트

• 스크롤 시 CPU 점유율
• Reflow/Repaint 횟수
• Long task 발생 여부

Lazy Loading 동작 시각화

• 왼쪽: 여러 개의 600×600 이미지 블록이 나열되어 있으며, 화면 스크롤에 따라 새로운 이미지가 등장함
• 오른쪽: Chrome DevTools의 Network 탭에서,
  스크롤 시점마다 새 이미지 요청(.jpg, .png)이 발생하는 것을 확인할 수 있음
  👉 Lazy Loading은 뷰포트 안에 들어온 이미지만 네트워크 요청을 보내는 방식으로, 페이지 초기 렌더링 속도를 개선하고 트래픽을 절감하는 대표적인 프론트엔드 최적화 기법입니다.

---

💭 Virtualization이 특히 효과적인 경우

케이스	이유
쇼핑몰 상품 목록	이미지·텍스트 혼합, DOM 수 많음
SNS 피드	사용자 스크롤 중심 UI
데이터 테이블	고정 높이 행 구조
로그/리스트뷰	실시간 업데이트 발생

---

💭 Virtualization과 함께 쓰면 좋은 기술

기술	설명
Lazy Loading	이미지/비디오 로드를 스크롤 진입 시점으로 지연
Code Splitting	스크롤 깊은 구간에 필요한 모듈을 나중에 로드
Memoization	스크롤 시 불필요한 재렌더링 방지
IntersectionObserver	뷰포트 진입 감지 (페이징 로드용)

---

💭 마무리

데이터 리스트 가상화는 브라우저 성능의 “생명줄”입니다.
DOM이 1만 개든, 10만 개든, 사용자가 보는 건 한눈에 보이는 몇십 개뿐이죠.

Virtualization은 사용자가 체감하는 부드러움을 위해
렌더링 리소스를 “지금 필요한 부분”에만 집중시키는 기술입니다.

즉, 이것은 단순한 렌더링 트릭이 아니라
UX 중심 성능 설계(Performance-Driven UX)의 핵심입니다.