# 셀 상태 변경

## Content

셀 상태는 사용자가 수행하는 다양한 동작에 따라 셀이 어떻게 반응할지를 나타냅니다. 리포트 시트에서는 리포트가 생성됨에 따라 해당 셀 상태의 범위가 변경됩니다.
템플릿 시트에서 다양한 셀 상태를 설정할 수 있지만, **Preview 렌더 모드**에서만 그 효과가 더 명확하게 나타납니다.

>type=warning
> **참고:**
>
> * 템플릿 시트에서 `cellStates`가 설정된 셀이 **확장되지 않은 셀**일 경우, 리포트 시트에서 해당 `cellStates`의 범위 크기는 변하지 않지만, 확장 기준이 되는 좌상단 셀에 따라 위치 오프셋이 발생할 수 있습니다.
> * 템플릿 시트에서 `cellStates`가 설정된 셀이 **확장된 셀**일 경우, 리포트 시트에서 해당 `cellStates`의 범위는 템플릿 셀의 확장 방식에 따라 **크기가 변경**되며, 이 경우에도 위치 오프셋이 발생할 수 있습니다.

다음 코드는 사용자가 셀 위에 마우스를 올리거나 셀을 선택했을 때 **다양한 스타일을 적용**하는 방법을 보여줍니다. 이 예시에서는 템플릿 시트에 설정한 셀 상태가 **현재 셀 확장 방식에 맞춰 확장**되므로, 하나의 행과 두 개의 열에만 스타일을 설정했더라도, 실제 리포트 시트에서는 모든 행으로 상태가 확장됩니다.

```auto
// Cell States 추가
const cfs = templateSheet.conditionalFormats;

// 마우스 오버 시 배경색을 "연한 파란색(light blue)"으로 설정
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, new GC.Spread.Sheets.Style('lightblue'), [new GC.Spread.Sheets.Range(3, 0, 1, 3)]);

// 셀 선택 시 배경색을 "연한 회색(light grey)"으로 설정
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.selected, new GC.Spread.Sheets.Style('lightgrey'), [new GC.Spread.Sheets.Range(3, 0, 1, 3)]);
```

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