# 필요한 블록만 요청

한 번에 모든 주문을 내려받기 어려울 때 스크롤에 필요한 구간만 요청합니다. datasource는 시작·끝 행과 검색 조건을 받아 데이터를 공급하는 연결 객체입니다.

Canonical: https://grid.syidax.com/ko/docs/features/infinite-row-model/

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

## 동작 원리와 선택 기준

Grid는 요청을 만들고 앱은 서버 응답을 해석합니다. 마지막 데이터 위치 또는 전체 개수를 정확히 알려야 빈 구간을 반복 요청하거나 스크롤 길이가 잘못 표시되는 일을 막을 수 있습니다.

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

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

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

## 예제 1. 구간 조회 API 연결

아래 서버는 startRow 이상 endRow 미만의 행과 전체 개수 total을 반환한다고 가정합니다. 응답 실패도 반드시 Grid에 알립니다.

```javascript
grid.datasource = { getRows: async params => {
  try {
    const response = await fetch('/api/orders', { method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ startRow: params.startRow, endRow: params.endRow,
        sortModel: params.sortModel, filterModel: params.filterModel, quickFilter: params.quickFilter }) });
    if (!response.ok) throw new Error('조회 실패');
    const { rows, total } = await response.json();
    params.success(rows, total);
  } catch { params.fail(); }
}};
```

결과 확인: 사용자가 이동한 구간에 행이 채워집니다. 예시 URL은 앱에서 구현할 조회 API입니다.

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

## 예제 2. 요청 크기와 캐시 조절

서버 왕복 시간이 길면 작은 블록을 너무 자주 요청하지 않도록 크기를 조절합니다.

```javascript
grid.cacheBlockSize = 100;
grid.maxBlocksInCache = 5;
```

결과 확인: 한 번에 요청하는 행 묶음과 보관할 묶음 수를 제한합니다. 캐시를 줄이면 메모리는 줄지만 이전 구간 재방문 시 조회가 늘 수 있습니다.

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

## 예제 3. 서버 데이터가 바뀐 뒤 갱신

외부 화면에서 주문을 수정했으면 로드된 캐시가 오래된 상태일 수 있습니다.

```javascript
await grid.refreshInfiniteCache();
```

결과 확인: 갱신 요청이 진행된 뒤 서버의 최신 값을 읽습니다. 로컬 셀만 바꾸는 트랜잭션과 서버 재조회는 서로 다른 작업입니다.

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

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

성공과 실패 콜백은 요청마다 한 번만 호출합니다. 성공 콜백을 호출한 다음 예외를 다시 실패로 처리하지 않도록 응답 검증을 먼저 끝내세요.

서버 검색은 전체 데이터에 먼저 적용하고 그 결과에서 구간을 잘라야 합니다. 내려받은 100행에서만 검색하면 서버에 있는 다른 일치 행을 놓칩니다.

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

## 이 기능에 사용하는 API

- [datasource](https://grid.syidax.com/ko/docs/options/datasource.md) — 무한 스크롤 모델의 데이터 공급자입니다. 요청된 행 범위에 대해 성공 또는 실패 콜백을 완료해야 합니다.
- [cacheBlockSize](https://grid.syidax.com/ko/docs/options/cacheBlockSize.md) — 원격 행을 한 번에 요청하고 캐시할 블록 크기입니다.
- [maxBlocksInCache](https://grid.syidax.com/ko/docs/options/maxBlocksInCache.md) — 무한 행 모델에서 유지할 캐시 블록 수를 제한합니다. 메모리와 재조회 비용의 균형을 정합니다.
- [refreshInfiniteCache](https://grid.syidax.com/ko/docs/methods/refreshInfiniteCache.md) — 무한 행 모델의 캐시를 새로 조회합니다. 변경된 서버 조건과 데이터 공급자를 먼저 준비합니다.

<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/infinite-row-model) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.