# 실행 취소 및 다시 실행

## Content

Ctrl + Z 키를 사용하면 위젯에서 **작업을 실행 취소(Undo)** 할 수 있습니다.
그 이후 Ctrl + Y 키를 사용하면 **취소한 작업을 다시 실행(Redo)** 할 수 있습니다.
실행 취소할 수 있는 작업 유형은 아래와 같습니다.

* 텍스트 편집
* 더블 클릭으로 자동 맞춤(Autofit)
* 헤더 크기 조정
* 마우스로 열 또는 행 드래그
* 그룹 버튼을 통한 그룹 확장/축소
* 탭 스트립에서 더블 클릭하여 시트 탭 이름 편집
* Ctrl + V로 붙여넣기
* [Commands](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands) 클래스를 사용한 명령 실행
* 컨텍스트 메뉴 작업 중 뷰포트 영역에서 실행된 작업

Ctrl + Z로 실행 취소되지 않는 작업은 아래와 같습니다.:

* 드롭다운 버튼을 사용한 정렬 또는 필터링
* 셀 범위 선택
* 특정 셀로 이동
* 스크롤
* 탭 스트립의 리사이즈 박스 크기 조정
* 탭 스트립의 새 탭 추가 클릭
* 시트 탭 영역에서 실행된 컨텍스트 메뉴 작업
* [CommandManager](/spreadjs/api/v19/classes/GC.Spread.Commands.CommandManager) [execute](/spreadjs/api/v19/classes/GC.Spread.Commands.CommandManager#execute) 메서드에서 Workbook의 [fromJSON](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#fromJSON) 또는 Worksheet의 [fromJSON](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#fromJSON) 메서드를 호출한 경우
* [CommandManager](/spreadjs/api/v19/classes/GC.Spread.Commands.CommandManager) 의 [execute](/spreadjs/api/v19/classes/GC.Spread.Commands.CommandManager#execute) 메서드에서 [UndoManager](/spreadjs/api/v19/classes/GC.Spread.Commands.UndoManager)의 [Undo](/spreadjs/api/v19/classes/GC.Spread.Commands.UndoManager#undo) 또는 [Redo](/spreadjs/api/v19/classes/GC.Spread.Commands.UndoManager#redo) 메서드를 호출한 경우

코드에서 실행 취소를 **허용하거나 차단**하려면 **options.allowUndo** 속성을 사용하면 됩니다.
allowUndo 속성을 true 로 설정한 후에는 [startTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#startTransaction) , [undoTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#undoTransaction) , [endTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#endTransaction) 메서드를 사용하여 **작업의 실행 취소 및 다시 실행**을 수행할 수 있습니다.

## 코드 예제

이 예제는 **options.allowUndo** 속성을 설정하고 작업을 지정하는 방법을 보여줍니다.

```javascript
spread.options.allowUndo = true;
spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 3, count: 5});
```

이 예제는 [startTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#startTransaction) , [undoTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#undoTransaction) , [endTransaction](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#endTransaction) 메서드를 사용하여 **셀의 배경색을 변경**하는 방법을 보여줍니다.

```javascript
var command = { canUndo: true, execute: function (context, options, isUndo)
  {
    var Commands = GC.Spread.Sheets.Commands;
    if (isUndo)
    {
       Commands.undoTransaction(context, options);
       return true;
    }
    else
    {
      Commands.startTransaction(context, options);
      var sheet = context.getSheetFromName(options.sheetName);
      var cell = sheet.getCell(options.row, options.col);
      cell.backColor(options.backColor);
      Commands.endTransaction(context, options);
      return true;
    }
  }
};
var spread = GC.Spread.Sheets.findControl(document.getElementById("sampleDiv"));
var commandManager = spread.commandManager();
commandManager.register("changeBackColor", command);
commandManager.execute({ cmd: "changeBackColor", sheetName: spread.getSheet(0).name(), row: 1, col: 2, backColor: "red" });
```

## 실행 취소(Undo) 및 다시 실행(Redo) 횟수 제한하기

`undo` 및 `redo` 스택 크기를 조절하여 실행 취소 및 다시 실행 횟수에 제한을 둘 수 있습니다.
이를 위해 undoManager 클래스의 **maxSize** 메서드를 사용할 수 있으며, 이는 **메모리 사용량을 줄여 애플리케이션 성능 향상**에 도움이 됩니다.

>type=warning
> **참고 :** maxSize 메서드에 유효하지 않은 값을 전달하면 undoManager 자체가 반환됩니다.


```javascript
var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
let undoManager = spread.undoManager();
undoManager.maxSize(20);        // set max size.
let maxSize = undoManager.maxSize();    // get max size.
```

## 실행 취소(Undo) 및 다시 실행(Redo) 스택 가져오기

**getUndoStack** 및 **getRedoStack** 함수를 사용하여 **Undo 및 Redo 스택을 가져올 수 있습니다**.
이 함수들은 시트 이름과 명령에 대한 문자열 값을 포함한 **객체 형태의 스택**을 반환합니다.

```javascript
function getUndoStackFunction() {
    console.log(spread.undoManager().getUndoStack());
}

function getRedoStackFunction() {
    console.log(spread.undoManager().getRedoStack());
}
```

이 함수들을 사용하여 **사용자 지정 메뉴를 생성**하고, 스프레드시트에서 **실행 취소(Undo) 및 다시 실행(Redo) 작업 목록을 표시**할 수도 있습니다.

```html
<body>
   <input type="button" value="Get Undo Stack" onclick="getUndoStackFunction()">
   <input type="button" value="Get Redo Stack" onclick="getRedoStackFunction()">
</body>
```

SpreadJS 디자이너에서는 **Undo 및 Redo 스택을 드롭다운 목록 형태로 표시**합니다.
사용자는 원하는 작업을 선택하여 **해당 시점의 스프레드시트 상태로 이동**할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/undoRedoStack.gif)