# View 기본 사항

## Content

## View 생성

테이블에서 [`addView`](/spreadjs/api/classes/GC.Data.Table#addview)를 사용합니다.

```javascript
var view = table.addView(
    name,
    columnInfos?,
    includeDefaultColumns?,
    options?
);
```

### 매개 변수

* **name** - 테이블 내에서 고유한 View 이름입니다.
* **columnInfos** - 필드 이름 또는 열 구성 객체의 배열입니다.
* **includeDefaultColumns** - 열 정보가 생략된 경우 기본 테이블 열을 포함할지 여부를 지정합니다.
* **options** - 추가적인 View 수준 구성입니다.

### 예제

테이블에 다음 데이터가 있다고 가정합니다.

```javascript
var sampleData = [
    { Id: 1, Name: "John Doe", Score: 85 },
    { Id: 2, Name: "Jane Smith", Score: 92 }
];
```

테이블 생성:

```javascript
var myTable = dataManager.addTable("myTable", {
    data: sampleData
});
```

View 생성:

```javascript
var myView = myTable.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", width: 150 },
    { value: "Score", width: 80 }
]);
```

이 View는:

* 선택한 필드만 포함합니다.
* `Id`를 `ID`로 이름 변경합니다.
* 열 레이아웃을 제어합니다.

열을 지정하지 않으면 View는 호스트 테이블의 모든 기본 열을 포함합니다.

## View 초기화

View를 생성한 후 다음을 호출해야 합니다.

```javascript
view.fetch();
```

이 단계는 View 데이터를 초기화하고 사용할 준비를 수행합니다.
이 메서드는 Promise를 반환합니다.

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

기본 데이터 원본을 새로 고쳐야 하는 경우 다음을 사용합니다.

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

[`fetch()`](/spreadjs/api/classes/GC.Data.View#fetch)를 호출하면 바인딩 또는 데이터 접근 전에 View가 호스트 테이블의 최신 상태를 반영하도록 보장합니다.

## View를 시트에 바인딩

View는 UI 컴포넌트의 구조화된 데이터 원본 역할을 합니다.

### 테이블 시트에 바인딩

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

### 간트 시트에 바인딩

```javascript
view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
});
```

시트는 View에서 정의된 구조에 따라 데이터를 렌더링합니다.

## View 관리

각 테이블은 View 컬렉션을 유지합니다.
동일한 테이블 데이터를 서로 다른 레이아웃으로 표현하기 위해 여러 View를 생성할 수 있습니다.

### View 추가

```javascript
table.addView("summaryView");
```

### View 제거

```javascript
table.removeView("summaryView");
```

View를 제거해도 기본 테이블 데이터에는 영향을 주지 않습니다.

## View의 열 관리

View 생성 후에도 열을 조정할 수 있습니다.

### 열 추가

```javascript
view.addColumn("Email");
```

### 구성과 함께 열 추가

```javascript
view.addColumn({
    value: "Email",
    caption: "이메일 주소",
    width: 200
});
```

### 열 제거

```javascript
view.removeColumn("Email");
```

### 열 가져오기

```javascript
view.getColumn();     // 모든 열
view.getColumn(1);    // 특정 열
```

이 작업들은 View의 구조만 수정하며, 기본 테이블 스키마는 변경하지 않습니다.