# Fetch & Reload

## Content

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

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

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

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

## Fetch 사용 시점

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

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

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

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

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

## 기본 사용 방법

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

예제:

```javascript
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);
  });

});
```

## 데이터 다시 로드

### 다시 로드 사용 시점

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

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

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

```javascript
table.fetch(true);
```

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

### 기능적 영향

`fetch(true)`가 호출되면:

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

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

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

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

### 정렬 및 필터링 동작

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

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

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

### 예제

```javascript
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)`를 사용합니다.

### 예제

```javascript
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를 다시 생성하면 올바른 바인딩 및 재계산을 보장할 수 있습니다.

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