Fetch & Reload

fetch 메서드는 테이블에 구성된 데이터 원본을 기반으로 테이블 데이터를 초기화하거나 새로 고칩니다.

fetch(reload?: boolean): Promise<any>;

fetch()는 아직 로드되지 않은 테이블을 초기화합니다.
fetch(true)는 구성된 데이터 원본으로부터 데이터를 강제로 다시 로드합니다.

이 섹션에서는 다시 로드 모드의 동작 및 사용 방법을 설명합니다.

Fetch 사용 시점

테이블이 다음 중 어떤 방식으로 구성되어 있든:

로컬 데이터(data)
원격 데이터(remote)

다음 작업을 수행하기 전에 항상 table.fetch()를 호출해야 합니다.

View 생성
테이블 시트에 바인딩
테이블 데이터 접근
관계 생성

fetch()를 호출하면 테이블이 완전히 초기화되어 후속 작업을 수행할 준비가 되었음을 보장합니다.

기본 사용 방법

table.fetch().then(function(data) {
  // 여기에서 데이터를 사용할 수 있습니다.
});

예제:

const table = dataManager.addTable("products", {
  data: [
    { id: 1, name: "Pen" },
    { id: 2, name: "Notebook" }
  ]
});

const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

// 테이블 사용 전에 항상 fetch 호출
table.fetch().then(function () {

  const view = table.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

});

데이터 다시 로드

다시 로드 사용 시점

다시 로드는 일반적으로 현재 애플리케이션 세션 외부에서 데이터가 변경될 수 있는 원격 테이블과 함께 사용됩니다.

일반적인 시나리오는 다음과 같습니다.

수동 새로 고침 버튼
백엔드 서비스와의 주기적 동기화
다른 사용자가 업데이트한 데이터
최신 결과를 얻기 위한 동일 엔드포인트 재조회

구성된 데이터 원본에서 테이블 데이터를 새로 고치려면 다음을 호출합니다.

table.fetch(true);

참고:
테이블이 구성된 데이터 원본을 다시 실행하도록 보장합니다.
실제 데이터가 변경되는지는 데이터 원본 자체에 따라 달라집니다.
다시 로드 중 내부 업데이트 동작은 데이터 원본 및 사용 시나리오에 따라 달라집니다.

기능적 영향

fetch(true)가 호출되면:

테이블 데이터가 다시 로드됩니다.
기존 View가 다시 계산됩니다.
정렬 및 필터링 규칙은 유지됩니다.
데이터가 변경된 경우 바인딩된 컴포넌트가 자동으로 업데이트됩니다.

다시 로드는 다음을 수행하지 않습니다.

테이블 재생성
View 재생성
view.fetch() 재호출 요구
setDataView() 재호출 요구

다시 로드된 데이터가 이전 결과와 동일하면 눈에 보이는 변화는 발생하지 않습니다.

정렬 및 필터링 동작

View에 활성화된 정렬 또는 필터가 있는 경우:

규칙은 유지됩니다.
다시 로드 후 새로 로드된 데이터에 적용됩니다.
새로운 데이터에 따라 결과 집합이 달라질 수 있습니다.

추가 작업은 필요하지 않습니다.

예제

const dataManager = spread.dataManager();
const tableSheet = spread.addSheetTab( 0, "ProductTableSheet", GC.Spread.Sheets.SheetType.tableSheet );

const products = dataManager.addTable("products", {
  remote: {
    read: {
      url: "https://demodata.mescius.io/northwind/api/v1/products",
    }
  }
});

// 초기 로드
products.fetch().then(() => {

  const view = products.addView("productView");

  view.fetch().then(function () {
     tableSheet.setDataView(view);
  });

  // 이후: 강제 다시 로드
  document.getElementById("refreshBtn").addEventListener("click", () => {
    products.fetch(true).then(() => {
      tableSheet.setDataView(view);
      console.log("Table data reloaded.");
    });
  });

});

fetch(true) 호출 후:

테이블이 원격 엔드포인트에 다시 데이터를 요청합니다.
기존 View 규칙은 유지됩니다.
테이블 시트는 업데이트된 데이터를 자동으로 반영합니다.

데이터 원본 전환

동일한 엔드포인트를 새로 고치는 것 외에도 fetch(true)는 런타임에 테이블의 데이터 원본을 변경해야 하는 경우에도 사용할 수 있습니다.

대표적인 예는 템플릿 기반 워크플로입니다.

디자이너는 개발 중 테스트 또는 데모 엔드포인트를 사용하여 스프레드시트 템플릿을 만드는 경우가 많습니다.

템플릿을 운영 환경에 배포할 때는 애플리케이션이 테스트 엔드포인트를 운영 데이터 원본으로 교체해야 합니다.

이 경우:

테이블 정의는 유지됩니다.
원격 엔드포인트가 변경됩니다.
새로운 데이터 원본에서 데이터를 로드하기 위해 fetch(true)를 사용합니다.

예제

var options = myTable.options;

// 원격 엔드포인트 교체 (개발 → 운영)
options.remote.read.url = "https://developer.mescius.com/spreadjs/demos/server/api/Order";

myTable.options = options;

// 새로운 엔드포인트에서 다시 로드
myTable.fetch(true).then(function () {

  // 새 데이터 집합을 위한 View 재생성
  var view = myTable.addView("myView2");

  view.fetch().then(function () {
     sheet.setDataView(view);
  });

});

다른 엔드포인트로 전환하는 경우:

반환되는 데이터 집합의 구조나 내용이 달라질 수 있습니다.
기존 View 상태가 새로운 데이터와 맞지 않을 수 있습니다.
View를 다시 생성하면 올바른 바인딩 및 재계산을 보장할 수 있습니다.

이 패턴은 개발 환경에서 운영 환경으로 템플릿을 승격할 때 일반적으로 사용됩니다.