# 점진적 로딩

## Content

데이터의 양에 따라 매우 큰 파일을 로드하는 데 시간이 오래 걸리거나 브라우저의 처리 한계에 도달할 수 있습니다. 따라서 데이터나 수식이 많이 포함된 대용량 파일을 로드할 때는 데이터 처리 시간을 단축하고 로딩 성능을 최적화하기 위해 **점진적 로딩(incremental loading)** 기능을 사용하는 것이 권장됩니다.
점진적 로딩 기능은 먼저 활성 시트의 일부 데이터만 로드하고, 나머지 수식, 셀 값, 사용자 지정 이름 등의 데이터를 백그라운드에서 순차적으로 로드합니다. 데이터를 로드할 때 [fromJSON](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#fromJSON) 함수를 사용하면, 옵션에서 `incrementalLoading`을 true로 설정하여 사용할 수 있습니다.
또한 `incrementalLoading` 옵션에 콜백 함수를 설정하면 로딩 상태를 확인할 수 있으며, 해당 콜백의 매개변수를 통해 시트 이름, 현재 테마 등 시트 관련 정보를 확인할 수 있습니다. 로딩 완료 후 수행할 다음 작업도 설정할 수 있습니다.
추가로, 데이터를 로드한 후 셀 값을 다시 계산할지 여부는 `doNotRecalculateAfterLoad`를 `false`로 설정하여 지정할 수 있습니다.

> **참고:** 데이터 로딩 중 UI 이벤트가 발생하면, SpreadJS는 먼저 해당 이벤트를 처리한 후 나머지 데이터를 로드합니다.

아래 예제는 JSON 파일을 워크시트에 점진적으로 로드하며, 시트 이름을 로드 중에 콘솔 로그에 출력하는 방식입니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/incrementalload.gif)

다음 코드 예제는 점진적 로딩을 사용하여 JSON 파일을 로드하는 방법을 보여줍니다.

```JavaScript
var loadingStatus = new LoadingStatus('LoadingStatus', { tipText: 'LoadingStatus' });
statusBar.add(loadingStatus);

var incrementalEle = document.getElementById("incremental");
function fromJSON(json) {
    if (incrementalEle.checked) {
        spread.fromJSON(json, {
            doNotRecalculateAfterLoad: true,
            incrementalLoading: {
                loading: function (progress, args) {
                    progress = progress * 100;
                    document.getElementById("statusBar").innerText = "Loading: " + progress.toFixed(2) + "%";
                    loadingStatus.updateProgress(progress);
                    console.log(progress, args.sheet.name());
                },
                loaded: function () {
                    document.getElementById("statusBar").innerText = "Finish";
                }
            }
        });
    } else {
        spread.fromJSON(json);
        loadingStatus.updateText("Ready");
    }
}
```