# 직렬화

## Content

SpreadJS는 사용자 정의 셀 타입, 사용자 정의 함수, 사용자 정의 포맷터, 사용자 정의 태그, 사용자 정의 sparklineEx의 직렬화를 지원합니다.
직렬화 시, 사용자 정의 타입의 **toJSON** 메서드는 자기 자신을 나타내는 문자열 필드 `type`을 저장합니다. 이 문자열 타입은 `mynamespace.MyCellType`처럼 window와 관련된 형식입니다. 역직렬화 시, **getTypeFromString** 메서드는 type 문자열을 파싱하여 사용자 정의 타입을 가져오고, 그 인스턴스를 생성한 다음 **fromJSON** 메서드를 호출합니다.
사용자 정의 타입의 type 필드에 실제 타입 문자열을 지정하면 해당 타입은 직렬화 및 역직렬화됩니다.
사용자 정의 타입이 순환 참조를 갖거나 JSON 크기를 줄이거나 다른 요구 사항이 있는 경우, **toJSON**과 **fromJSON** 메서드를 오버라이드해야 합니다.
사용자 정의 타입을 window 객체에 두고 싶지 않은 경우, type 문자열을 파싱하기 위해 **getTypeFromString** 메서드도 오버라이드해야 합니다.
다음 코드 예제는 spread1의 toJSON과 spread2의 fromJSON을 사용하여 spread1의 모든 데이터를 spread2로 직렬화하는 방법을 보여줍니다. 버튼 클릭 후 `MyTag` 인스턴스가 spread2에 존재하게 됩니다.

```html
<!DOCTYPE html>
<html>
<head>
<title>Spread HTML test page</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script type="text/javascript">
    // 태그 사용자정의
    function MyTag(name, age) {
        this.name = name;
        this.age = age;
        this.typeName = "MyTag";
    }
    MyTag.prototype.toJSON = function () {
        var settings = {};
        settings.name = this.name;
        settings.age = this.age;
        settings.typeName = this.typeName;
        return settings;
    };
    MyTag.prototype.fromJSON = function (settings) {
        this.name = settings.name;
        this.age = settings.age;
        this.typeName = settings.typeName;
    };
    document.addEventListener("DOMContentLoaded", function () {

        var spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
        var sheet1 = spread1.getActiveSheet();
        sheet1.tag(new MyTag("Ivy", 24));
        sheet1.setTag(0, 0, new MyTag("Yang", 25));
        var btn1 = document.getElementById("btn1");        
        btn1.addEventListener("click", function () {
            //Serialize ss to ss1.
            var jsonStr = JSON.stringify(spread1.toJSON());

            var spread2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"),{sheetCount:3});
            spread2.fromJSON(JSON.parse(jsonStr));
            var sheet2 = spread2.getActiveSheet();
            alert("Tag of sheet:" + JSON.stringify(sheet2.tag()));
            alert("Tag of Cell[0,0]: " + JSON.stringify(sheet2.getTag(0, 0)));
        });
    });
 </script>
 </head>
 <body>
     <div>
         <div id="ss" style="height: 200px; width: 500px"></div>
         <div id="ss1" style="height: 200px; width: 500px"></div>
     </div>
     <input type="button" id="btn1" value="Serialization" />
 </body>
 </html>
```