# 셀 컨텍스트 설정

## Content

리포트 시트에서 컨텍스트는 매우 중요한 개념이며, 보고서 레이아웃에 영향을 미칩니다. 기본적으로 모든 컨텍스트에서 하위 셀의 데이터를 필터링하고, 모든 하위 셀은 컨텍스트와 함께 반복되기 때문입니다.
템플릿 셀에서 컨텍스트를 설정하려면 [Spread.Report.TemplateSheet](/spreadjs/api/v19/classes/GC.Spread.Report.TemplateSheet) 클래스의 `setTemplateCell` 메서드에서 `context` 속성을 사용하면 됩니다.
하나의 셀에 대해 설정할 수 있는 컨텍스트는 다음 두 가지입니다:

* **수직 컨텍스트(Vertical context):** 셀의 왼쪽에 있는 수직 spill 방향의 셀을 수직 컨텍스트로 사용합니다.
* **수평 컨텍스트(Horizontal context):** 셀의 위쪽에 있는 수평 spill 방향의 셀을 수평 컨텍스트로 사용합니다.

>type=warning
> **참고:**
> 셀이 수직 및 수평 컨텍스트를 모두 가지고 있다면, 이는 교차 셀이 되며 교차 보고서(cross-report)를 생성할 때 사용됩니다.

템플릿 셀은 설정된 컨텍스트 값에 따라 다르게 동작할 수 있습니다.

| **컨텍스트** | **값** | **결과** |
| ---- | --- | --- |
| @rows=3:Horizontal | None | 셀에 수평 컨텍스트가 없음을 의미합니다. |
| 셀 이름 | 해당 셀을 수평 컨텍스트로 사용합니다. |
| 기본값/Undefined | 위쪽의 수평 확장 셀을 수평 컨텍스트로 사용합니다. |
| @rows=3:Vertical | None | 셀에 수직 컨텍스트가 없음을 의미합니다. |
| 셀 이름 | 해당 셀을 수직 컨텍스트로 사용합니다. |
| 기본/Undefined | 왼쪽의 수직 확장 셀을 수직 컨텍스트로 사용합니다. |

>type=warning
> **참고:** 셀의 수직 및 수평 컨텍스트 값이 기본값 또는 미정의로 설정되어 있고, 왼쪽(수직) 또는 위쪽(수평)에 spill 셀이 없는 경우, 해당 셀은 계층 구조의 루트 노드를 컨텍스트로 사용합니다.

**템플릿 시트에서 컨텍스트 설정 방법:**

1. 데이터 매니저에서 테이블 소스를 정의합니다.
2. 템플릿 셀에 `type`과 `binding` 옵션을 설정합니다.
3. 템플릿 셀에 `context` 속성을 설정합니다.

다음은 셀에 수직 및 수평 컨텍스트를 설정하는 코드 샘플입니다:

```javascript
// 수직 컨텍스트를 셀로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'A1',
    },
});
// 수직 컨텍스트를 None으로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    context: {
        vertical: 'None',
    },
});

// 수평 컨텍스트를 셀로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'A1',
    },
});
// 수평 컨텍스트를 None으로 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Group',
    binding: `Orders[customerId]`,
    spillDirection: 'Horizontal',
    context: {
        horizontal: 'None',
    },
});

// 셀에 수직 및 수평 컨텍스트 모두 설정
templateSheet.setTemplateCell(1, 1, {
    type: 'Summary',
    aggregate: 'Sum',
    binding: `Sales[Sales]`,
    context: {
        vertical: 'A2',
        horizontal: 'B1',
    },
});
```

특정 예제들과 함께 셀 컨텍스트 설정하는 방법에 대해 알아보겠습니다.

#### **예제 1: 수직 컨텍스트를 None으로 설정**

아래 예제에서 셀 A2와 B2는 모두 Group 셀입니다. A2는 `CustomerId`, B2는 `EmployeeId` 필드에 바인딩되어 있습니다.
B2의 수직 컨텍스트는 'None'으로 설정되어 있으므로, A2와 B2는 서로 영향을 주지 않고 각각 수직으로 데이터를 spill합니다.

```javascript
templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 1, {  // cell B2
     type: 'Group',
     binding: 'Orders[EmployeeId]',
     context: {
         vertical: 'None'
     }
})
reportSheet.refresh();
```

위 코드의 출력 결과는 아래와 같습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.d7757a.png?width=300)

#### 예제 2: 수직 컨텍스트를 기본값(Default)으로 설정

A2와 C2가 Group 셀이며, 각각 `CustomerId`와 `EmployeeId`에 바인딩되어 있습니다. C2는 수직 컨텍스트를 설정하지 않았기 때문에, 왼쪽에 위치한 A2 셀을 수직 컨텍스트로 사용하게 됩니다.

```javascript
templateSheet.setTemplateCell(1, 0, {  // cell A2
     type: 'Group',
     binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(1, 2, {  // cell C2
     type: 'Group',
     binding: 'Orders[EmployeeId]'
})
reportSheet.refresh();
```

위 코드의 출력 결과는 아래와 같습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.a47cf3.png?width=400)

#### 예제 3: 수직 컨텍스트를 셀 이름으로 설정

A2는 `CustomerId`, B3는 `EmployeeId`에 바인딩되어 있으며, B3의 수직 컨텍스트는 A2로 지정되어 있습니다.
따라서 B3 셀은 A2를 수직 컨텍스트로 따라가며 데이터를 spill합니다.

```javascript
templateSheet.setTemplateCell(1, 0, {  // A2
          type: 'Group',
          binding: 'Orders[CustomerId]'
});
templateSheet.setTemplateCell(2, 1, {  // B3
          type: 'Group',
          binding: 'Orders[employeeId]',
          context: {
              vertical: 'A2',
          }
})
reportSheet.refresh();
```

위 코드의 출력 결과는 아래와 같습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/image.4d4e56.png?width=400)