직렬화와 역직렬화

이제 디코딩과 인코딩을 통해 서버에 있는 데이터를 가져와 읽거나 보낼 수 있다!!
하지만! 이 데이터를 곧 바로 UI에 데이터를 뿌려주는 것은 불가능하다.. ㅠ

디코딩과 인코딩을 통해 서버와 클라이언트 간에 데이터를 주고받을 수 있게끔 데이터를 특정 형식으로 변환하여 통신이 가능하게 했으나 최종 목적인 UI에 반영을 하려면, 클라이언트 앱 내에서 사용하기 편리한 형태의 객체로 데이터를 가공해야 한다. (객체지향..!)

JSON 형식의 데이터와 앱 내의 객체 간의 변환을 위한 추가 작업이 필요한데 이것이 바로 직렬화와 역직렬화다.

• 직렬화(Serialization): 앱 내의 객체를 JSON 형식으로 변환하여 서버로 전송하거나 저장하는 과정
• 역직렬화(Deserialization): 서버로부터 받은 JSON 데이터를 앱 내의 객체로 변환하는 과정

이렇게 직렬화, 역직렬화를 하고 나면 데이터를 앱 내에서 활용할 수 있다! ㅎ

---

직렬화와 역직렬화는 어떻게 하는 걸까?

toJson() , fromJson() 메서드를 활용하면 된다.

• 직렬화 메서드 toJson() : 클래스 내용(객체)을 Json 형태로 변환하여 서버에 전달
• 역직렬화 메서드 fromJson() : Json 형태를 서버에서 받아 클래스 내용으로 변환
  
  
  
  

👉 직렬화 Serialization 예시)

이런 JSON 데이터가 있다고 해보자.

{"addr": "123 Main St","code": "54321"}

직렬화를 위한 과정은 아래와 같다.

//1.
Map<String, dynamic> jsonData = {"addr": "123 Main St", "code": "54321"};

// 2.
class Store {
  String? addr;
  String? code;

  Store({
    this.addr,
    this.code,
  });

// 3. 
Store.fromJson(Map<String, dynamic> json) {
  addr = json['addr'];
  code = json['code'];
 }
} // class 내 작업 종료

// 4. 
Store store = Store.fromJson(jsonData);

//5. 
void main() {
  print(store.addr);
}

// 출력: 123 Main St

1. 일단 JSON 데이터를 Dart에서 활용할 수 있도록 정의한다.
2. 그리고 내가 쓸 클래스를 생성한다.
3. 직렬화 작업이 시작되는데, JSON 키에 있는 addr, code의 값을 store 클래스의 addr, code의 값에 할당하는 작업을 하는 거다. 즉, JSON에 있는 키들을 Store의 키로 사용하겠다는 것이다.
4. 이제 void main에서 사용을 하기 위해 생성자를 만든다. fromJson 메서드를 통해 jsonData를 담은 Store 클래스의 store 객체 생성한다.
5. 드디어 store 생성자를 활용할 수 있게 되었다!
   store 객체는 jsonData를 담고 있으니 JSON 데이터의 addr 값이 store의 addr에 할당된 것이다.
   
   
   
   

👉 역직렬화 Deserialization 예시)

역직렬화도 목적은 비슷한데 방법과 흐름이 조금 다르다.

//1. 
class Store {
  String? addr;
  String? code;

  Store({this.addr, this.code
});

//2. 
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['addr'] = this.addr;
    data['code'] = this.code;
    return data;
  }
}

// 3. 
void main() {
  Map<String, dynamic> jsonData = {"addr": "123 Main St", "code": "54321"};

// 4. 
  Store store = Store(
    addr: jsonData['addr'],
    code: jsonData['code'],
  );

// 5. 
  Map<String, dynamic> jsonFromStore = store.toJson();

// 6. 
  print("To JSON: $jsonFromStore");
}
// 출력: To JSON: {addr: 123 Main St, code: 54321}

1. 내 클래스다.
2. 마찬가지로 클래스 내부에서 작업이 시작된다. 이번엔 역직렬화다!
   내 클래스의 객체가 필수로 가져야할 파라미터가 json 데이터의 키로 동일하게 들어갈 수 있도록 한다.
3. dart에서 사용할 수 있는 데이터 구조로 맵을 정의했다.
4. 객체를 생성한다.
5. toJson 메서드를 사용하여 Store 객체를 JSON으로 변환한다.
6. 생성된 JSON 출력해보자.

이제 UI에 직접 뿌려볼 작업만 남았다!