# 대량 데이터

가상화는 전체 데이터 중 화면 주변에 필요한 행·열 DOM만 렌더링합니다. 데이터 자체를 서버에서 일부만 가져오는 행 모델과는 다른 성능 기능입니다.

Canonical: https://grid.syidax.com/ko/docs/features/virtualization/

<a id="understand"></a>

## 동작 원리와 선택 기준

높이가 제한된 Grid에서 세로 가상화가 효과적입니다. 가로로 열이 많은 표는 열 가상화도 검토하되 사용자 정의 셀의 렌더링 비용과 고정 열의 수를 함께 살펴봅니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 많은 행을 정해진 높이에 표시

데이터 로딩과 별개로 렌더링 범위를 제한합니다.

```javascript
grid.height = 520;
grid.virtualScroll = true;
```

결과 확인: 스크롤하면서 현재 위치의 행이 나타납니다. 모든 행이 동시에 DOM에 존재하지는 않습니다.

<a id="example-2"></a>

## 예제 2. 열이 많은 보고서

가로 열 가상화를 명시적으로 켭니다.

```javascript
grid.virtualizeColumns = true;
```

결과 확인: 수백 개 열을 가진 표에서 화면 밖 열의 렌더링 비용을 줄일 수 있습니다. 열 이동·고정·너비 변경과 함께 검증하세요.

<a id="example-3"></a>

## 예제 3. 성능 문제를 나눠 찾기

같은 데이터로 기본 텍스트 셀과 복잡한 렌더러를 비교합니다. 요청 시간·파싱 시간·정렬 시간·스크롤 프레임 시간을 나누어 측정합니다.

결과 확인: 가상화는 데이터 다운로드나 무거운 formatter 계산을 자동으로 없애지 않습니다. 병목에 맞춰 행 모델·처리 엔진·렌더러를 조절합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

숨겨진 탭에서 초기화한 표는 컨테이너 크기가 다를 수 있습니다. 실제 보이는 상태에서 높이와 레이아웃을 확인합니다.

DOM 행 개수로 전체 데이터 수를 계산하지 마세요. 데이터·표시 행 API 또는 서버의 전체 개수를 사용합니다.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [height](https://grid.syidax.com/ko/docs/options/height.md) — Grid 컨테이너 높이를 지정합니다. 숫자 또는 CSS 길이 문자열을 사용하며 가상 스크롤과 하단 도구의 공간을 함께 고려합니다.
- [rowHeight](https://grid.syidax.com/ko/docs/options/rowHeight.md) — 기본 행 높이를 픽셀 단위로 정합니다. 글자 크기·셀 편집기·터치 영역에 맞게 선택합니다.
- [rowHeightFn](https://grid.syidax.com/ko/docs/options/rowHeightFn.md) — 행 인덱스와 데이터를 받아 개별 행 높이를 계산합니다. 높이에 영향을 주는 데이터가 바뀌면 refreshRowHeights로 다시 계산합니다.
- [virtualScroll](https://grid.syidax.com/ko/docs/options/virtualScroll.md) — 화면 주변의 행만 렌더링하는 세로 가상화를 사용합니다. 전체 데이터 다운로드를 줄이는 옵션과는 다릅니다.
- [virtualizeColumns](https://grid.syidax.com/ko/docs/options/virtualizeColumns.md) — 화면 주변의 열만 렌더링하는 가로 가상화를 설정합니다.
- [wrapText](https://grid.syidax.com/ko/docs/columns/wrapText.md) — 셀 텍스트 줄바꿈을 허용합니다. 충분한 높이가 없으면 내용이 잘릴 수 있습니다.
- [autoHeight](https://grid.syidax.com/ko/docs/columns/autoHeight.md) — 셀 내용에 맞춘 행 높이 계산을 사용합니다. 가상화와 큰 데이터의 비용을 함께 확인합니다.
- [refreshRowHeights](https://grid.syidax.com/ko/docs/methods/refreshRowHeights.md) — 행 높이를 다시 계산합니다. 내용이나 높이 콜백의 기준이 바뀐 뒤 사용합니다.
- [scrollToTop](https://grid.syidax.com/ko/docs/methods/scrollToTop.md) — Grid 스크롤을 맨 위로 이동합니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/virtualization) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.