# SpreadJS 컴포넌트와 통합

## Content

데이터 매니저는 고급 SpreadJS 컴포넌트에서 사용하는 구조화된 데이터 모델을 제공합니다.
데이터 매니저는 UI를 렌더링하거나 상호 작용을 처리하지 않습니다.
대신 컴포넌트는 Workbook의 데이터 매니저에 정의된 구조화된 테이블 또는 View에 바인딩됩니다.

## 통합 패턴

통합은 일관된 모델을 따릅니다.

1. Workbook의 데이터 매니저에 접근
2. 테이블 정의
3. 필요에 따라 스키마 및 관계 구성
4. View 생성(필요한 경우)
5. View 또는 테이블을 컴포넌트에 바인딩

각 컴포넌트는 모델을 서로 다른 방식으로 사용하지만 모두 동일한 데이터 매니저 인스턴스에 의존합니다.

## 테이블 시트

테이블 시트는 **View**에 바인딩됩니다.

```javascript
const dataManager = spread.dataManager();

// 테이블 정의
const table = dataManager.addTable("Employees", {
    data: [
        { id: 1, name: "John" },
        { id: 2, name: "Jane" }
    ]
});

// View 생성
const view = table.addView("employeeView", [
    { value: "id", caption: "ID" },
    { value: "name", caption: "Name" }
]);

await view.fetch();

// 테이블 시트에 바인딩
const tableSheet = spread.addSheetTab(
    0,
    "Employees",
    GC.Spread.Sheets.SheetType.tableSheet
);

tableSheet.setDataView(view);
```

테이블 시트는 테이블의 View 투영을 사용합니다.
모든 구조 로직은 데이터 매니저 내부에 유지됩니다.
컴포넌트 구성에 대한 자세한 내용은 [테이블 시트](/spreadjs/docs/features/tablesheet) 문서를 참조하세요.

## 간트 시트

간트 시트는 **계층형 View**에 바인딩됩니다.

```javascript
const dataManager = spread.dataManager();

const taskTable = dataManager.addTable("Tasks", {
    data: [
        { id: 1, name: "Planning", parentId: null },
        { id: 2, name: "Execution", parentId: 1 }
    ],
    schema: {
        hierarchy: {
            type: "Parent",
            column: "parentId"
        },
        columns: {
            id: { isPrimaryKey: true }
        }
    }
});

const view = taskTable.addView("taskView", [
    { value: "name", caption: "Task Name" }
]);

await view.fetch();

const ganttSheet = spread.addSheetTab(
    0,
    "Gantt",
    GC.Spread.Sheets.SheetType.ganttSheet
);

ganttSheet.bindGanttView(view);
```

계층 구조 구성은 스키마에 정의됩니다.
간트 시트는 계층 구조를 렌더링합니다.
컴포넌트 구성에 대한 자세한 내용은 [간트 시트](/spreadjs/docs/features/ganttsheet) 문서를 참조하세요.

## 리포트 시트

리포트 시트는 데이터 바인딩을 사용하여 **테이블**에 직접 바인딩됩니다.

```javascript
const dataManager = spread.dataManager();

const orders = dataManager.addTable("Orders", {
    data: [
        { orderId: 1001, customer: "A" },
        { orderId: 1002, customer: "B" }
    ]
});

await orders.fetch();

const reportSheet = spread.addSheetTab(
    0,
    "Report",
    GC.Spread.Sheets.SheetType.reportSheet
);

const template = reportSheet.getTemplate();

template.setTemplateCell(1, 0, {
    type: "List",
    binding: "Orders[orderId]"
});

reportSheet.refresh();
```

리포트 시트는 바인딩 식을 통해 구조화된 테이블 데이터를 사용합니다.
컴포넌트 구성에 대한 자세한 내용은 [리포트 시트](/spreadjs/docs/features/reportsheet) 문서를 참조하세요.

## 데이터 차트

데이터 차트는 시각화를 위해 테이블 데이터를 사용합니다.

```javascript
const dataManager = spread.dataManager();

const price = dataManager.addTable("Price", {
    data: [
        { product: "ItemA", price: 100 },
        { product: "ItemB", price: 120 }
    ]
});

await price.fetch();

const sheet = spread.getActiveSheet();

const chart = sheet.dataCharts.add("chart", 10, 10, 400, 300);

chart.setChartConfig({
    tableName: "Price",
    plots: [{
        type: GC.Spread.Sheets.DataCharts.DataChartType.column,
        encodings: {
            values: [{ field: "price" }],
            category: { field: "product" }
        }
    }]
});
```

차트는 테이블 이름을 참조합니다.
데이터 매니저는 구조화된 데이터의 원본으로 유지됩니다.
컴포넌트 구성에 대한 자세한 내용은 [데이터 차트](/spreadjs/docs/features/data-charts) 문서를 참조하세요.

## 공유 데이터 모델

데이터 매니저는 Workbook에 속하므로:

* 여러 컴포넌트가 동일한 테이블을 공유할 수 있습니다.
* 하나의 테이블이 여러 View를 지원할 수 있습니다.
* 업데이트가 바인딩된 컴포넌트 전체에 전파됩니다.

이를 통해 애플리케이션 전반에서 일관된 데이터 동작을 보장합니다.

## 책임 범위

데이터 매니저는 다음을 담당합니다.

* 테이블 구조
* 스키마 규칙
* 관계
* 계층 구조 구성
* 계산 및 동기화

컴포넌트는 다음을 담당합니다.

* 렌더링
* 레이아웃
* 상호 작용
* 컴포넌트별 명령

각 컴포넌트는 UI 구성 및 고급 기능에 대한 자체 문서를 제공합니다.

## 워크시트 테이블을 데이터 테이블로 변환

데이터 매니저 API를 통해 직접 테이블을 정의하는 것 외에도 SpreadJS는 기존 워크시트 테이블을 데이터 매니저 테이블로 변환할 수 있도록 지원합니다.
이를 통해 기존 시트 테이블도 다음을 포함한 구조화된 데이터 모델링 시스템에 참여할 수 있습니다.

* 스키마 구성
* View 생성
* 컴포넌트 바인딩
* 데이터 관계

변환 과정은 다음과 같습니다.

* 새로운 데이터 매니저 테이블 생성
* 원본 워크시트 테이블을 해당 테이블에 바인딩
* 데이터 관리 책임을 데이터 매니저로 이동

변환 후 워크시트 테이블은 기본 데이터 매니저 테이블의 View 역할을 합니다.
전용 API를 통해 프로그래밍 방식의 변환을 지원하며, 디자이너에서도 시각적인 변환 워크플로를 제공합니다.
변환 규칙, 제약 사항 및 예제에 대한 자세한 내용은 [데이터 테이블로/에서 변환](/spreadjs/docs/features/tablegen/convert-fromto-data-table)을 참조하세요.