# 행 및 열 상태
## Content
SpreadJS는 행 및 열의 현재 상태에 따라 스타일을 구성할 수 있도록 지원하며 [GC.Spread.Sheets.RowColumnStates](/spreadjs/api/enums/GC.Spread.Sheets.RowColumnStates) 열거형을 사용하여 모든 상태를 설정할 수 있습니다.
[ConditionalFormatting.RuleType](/spreadjs/api/enums/GC.Spread.Sheets.ConditionalFormatting.RuleType) 열거형 옵션에서 **rowStateRule** 또는 **columnStateRule** 을 사용한 후, 규칙을 추가하여 상태를 지정할 수 있습니다.
행 및 열 상태는 조건부 서식을 기반으로 하므로, [ConditionalFormats](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats) 클래스의 [addRowStateRule](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats#addRowStateRule)및 [addColumnStateRule](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats#addColumnStateRule) 메서드를 사용하여 행 및 열 상태를 추가할 수도 있습니다.
>type=warning
> **참고 :** 행 및 열 상태는 조건부 서식 범위의 이동 또는 복사를 지원하지 않습니다.
## 상태 유형
다음 표는 [GC.Spread.Sheets.RowColumnStates](/spreadjs/api/enums/GC.Spread.Sheets.RowColumnStates) 에서 사용할 수 있는 모든 행 및 열 상태 열거형 옵션을 설명합니다.
| **열거형 옵션** | **설명** |
| ------ | --- |
| `edit` | 셀을 편집할 때, 지정된 행 또는 열을 edit 상태로 실행합니다. |
| `hover` | 셀 위에 마우스를 올릴 때, 지정된 행 또는 열을 hover 상태로 실행합니다. |
| `active` | 셀이 포커스를 가질 때, 지정된 행 또는 열을 active 상태로 실행합니다. |
| `selected` | 셀이 선택되었을 때, 지정된 행 또는 열을 selected 상태로 실행합니다. |
| `updated` | 셀이 업데이트될 때, 보호된 시트에서 해당 행 또는 열을 잠급니다. |
| `inserted` | 셀이 삽입될 때, 보호된 시트에서 해당 행을 잠급니다. |
| `dirty` | 셀 상태가 dirty로 설정되면, 해당 행 또는 열을 dirty 상태로 실행합니다.
이 상태는 시트 데이터의 변경 사항을 쉽게 추적할 수 있도록 합니다. |
| `invalid` | 셀이 invalid로 설정되면, 해당 행 또는 열을 invalid 상태로 실행합니다. |
## 상태 우선순위
같은 방향(행 또는 열) 및 같은 범위에 대해 여러 상태가 설정된 경우, 지정된 행이나 열이 동시에 여러 상태에 해당되면 우선순위가 높은 상태의 스타일이 적용됩니다.
상태 적용 우선순위는 다음과 같습니다:
**Edit > Hover > Active > Selected > Updated > Inserted > Dirty > Invalid.**
다음 코드 샘플은 [ConditionalFormats](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats) 클래스 메서드를 사용하거나 새 상태 규칙을 추가하여 행 및 열 상태를 설정하는 방법을 보여줍니다.
```JavaScript
$(document).ready(function () {
// 시트 수를 3으로 설정
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
var sheet = spread.getSheet(0);
// 새 상태 규칙 사용
var cfs = sheet.conditionalFormats;
var ruleType = GC.Spread.Sheets.ConditionalFormatting.RuleType.rowStateRule;
var hoverstate = GC.Spread.Sheets.RowColumnStates.hover;
var style = new GC.Spread.Sheets.Style("yellow");
var ranges = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
var rule = new GC.Spread.Sheets.ConditionalFormatting.StateRule(ruleType, hoverstate, style, ranges);
cfs.addRule(rule);
// 또는
// ConditionalFormats 클래스 메서드 사용
var cfs1 = sheet.conditionalFormats;
var style1 = new GC.Spread.Sheets.Style("lightblue");
var columnRange = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
cfs1.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style1, columnRange); // 열 상태 추가
var cfs2 = sheet.conditionalFormats;
var style2 = new GC.Spread.Sheets.Style("pink");
var rowRange2 = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
cfs2.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style2, rowRange2); // 행 상태 추가
});
```
## 연속되지 않은 범위에 여러 스타일 적용
SpreadJS에서는 워크시트에서 행 또는 열 상태를 설정할 때 **연속되지 않은 범위(non-contiguous ranges)** 에도 여러 가지 스타일을 적용할 수 있습니다.
[ConditionalFormats ](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats)클래스의 [addRowStateRule](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats#addRowStateRule)또는 [addColumnStateRule](/spreadjs/api/classes/GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats#addColumnStateRule) 메서드를 사용하면, 행/열 상태, 적용할 스타일, 셀 범위를 매개변수로 받아 설정할 수 있습니다.
이 상태 규칙 메서드는 **단일 범위에는 하나의 스타일**을 허용하지만, **여러 범위에는 스타일 배열**을 사용하여 여러 스타일을 적용할 수 있습니다.
다음 코드 샘플은 **셀 hover 시** 연속되지 않은 범위에 여러 스타일을 적용하는 방법을 보여줍니다.
```JavaScript
// 샘플 코드
var state = GC.Spread.Sheets.RowColumnStates.hover;
var style1 = new GC.Spread.Sheets.Style("green"), style2 = new GC.Spread.Sheets.Style("red");
var range1 = new GC.Spread.Sheets.Range(1, 1, 10, 5), range2 = new GC.Spread.Sheets.Range(1, 7, 10, 5);
sheet.conditionalFormats.addRowStateRule(
state,
[style1, style2],
[range1, range2]
);
```
**addRowStateRule** 또는 **addColumnStateRule** 메서드를 사용할 때는 **스타일과 범위를 1:1로 매핑**해야 하며, 매핑되지 않은 스타일 또는 범위는 렌더링 시 무시됩니다.
>type=warning
> * **참고:** 이 기능은 `insert` 상태 및 `TableSheets` 기능에서는 지원되지 않습니다.