[Flutter] json_serializable 사용하기

https://pub.dev/packages/json_serializable

json_serializable | Dart Package

 

 

 json_serializable

 

json으로 받아오는 데이터를 직렬화 해주는 패키지.

 

class LectureDetailInfoModel {
  final int lectureDetailIndex;
  final String week;
  final String lectureStartDate;
  final String lectureEndDate;
  final String lectureStartTime;
  final String lectureEndTime;

  LectureDetailInfoModel({
    required this.lectureDetailIndex,
    required this.week,
    required this.lectureStartDate,
    required this.lectureEndDate,
    required this.lectureStartTime,
    required this.lectureEndTime,
  });

  factory LectureDetailInfoModel.fromJson(Map<String, dynamic> json) {
    return LectureDetailInfoModel(
      lectureDetailIndex: json["LcdIdx"] as int,
      week: json["LcdWeek"] as String,
      lectureStartDate: json["LcdStartDate"] as String,
      lectureEndDate: json["LcdEndDate"] as String,
      lectureStartTime: json["LcdStartTime"] as String,
      lectureEndTime: json["LcdEndTime"] as String,
    );
  }
}

 

보통 서버 통신을 해서 api에서 값을 받아오면 위와 같이 처리합니다.

코드에 factory부분을 자동으로 만들고 관리해주는 패키지 입니다.

 

 

사용하기

 

패키지 페이지를 가시면 Setup에 초기설정 exmaple이 있습니다.

 

 

---

 

 

pubspec.yaml에 추가해야할 패키지를 확인할 수 있습니다.

 

 

똑같이 추가한 다음 Pub get 해줍니다.

 

 

 

그다음 직렬화에 필요한 파일에 가서 import 와 part 부분을 넣어줍니다.

import는 추가한 패키지  /  part는 "현재파일명.g.dart"  해주시면 됩니다.

(클래스명 아니고 파일명이랑 같아야 합니다.)

 

 

그리고 해당 클래스를 자동으로 인스턴스화 시켜야 하는데요.

클래스위에 추가한 패키지에 annotation을 추가해야 합니다.

@JsonSerializable()    <<<< 

 

 

이렇게 추가해주시면 됩니다.

 

그리고 해당 프로젝트 터미널에서  flutter pub run build_runner build  코드를 작성합니다.

 

 

이렇게 하면 part 와 @JsonSerializable() annotation 이 붙은 파일을 자동으로 json 직렬화 시킨 파일을 생성합니다.

 

 

자동으로 .g.dart 파일이 생성됩니다. 안보이시는분은 

 

lib 폴더 우클릭해서 Reload from Disk 눌러주시면 됩니다.

 

 

 

자동으로 생선된 파일을 보면 위에서 직접 했던 작업인 FromJson을 자동으로 만들어줬습니다.

ToJson도 있네요.

 

이제 이걸 이용해보겠습니다.

 

 

 

기존 코드 변경

class LectureDetailInfoModel {
  final int lectureDetailIndex;
  final String week;
  final String lectureStartDate;
  final String lectureEndDate;
  final String lectureStartTime;
  final String lectureEndTime;

  LectureDetailInfoModel({
    required this.lectureDetailIndex,
    required this.week,
    required this.lectureStartDate,
    required this.lectureEndDate,
    required this.lectureStartTime,
    required this.lectureEndTime,
  });

  factory LectureDetailInfoModel.fromJson(Map<String, dynamic> json) {
    return LectureDetailInfoModel(
      lectureDetailIndex: json["LcdIdx"] as int,
      week: json["LcdWeek"] as String,
      lectureStartDate: json["LcdStartDate"] as String,
      lectureEndDate: json["LcdEndDate"] as String,
      lectureStartTime: json["LcdStartTime"] as String,
      lectureEndTime: json["LcdEndTime"] as String,
    );
  }
}

 

기존에 이렇게 factory로 싱글턴을 사용해서 직접 json과 매핑해서 인스턴스를 만들어줬습니다.

이제 위에 자동으로 만들어준 파일을 이용해서 저부분을 간단하게 줄여보겠습니다.

 

import 'package:json_annotation/json_annotation.dart';
part "lecture_detail_info_model.g.dart";

@JsonSerializable()
class LectureDetailInfoModel {
  final int lectureDetailIndex;
  final String week;
  final String lectureStartDate;
  final String lectureEndDate;
  final String lectureStartTime;
  final String lectureEndTime;

  LectureDetailInfoModel({
    required this.lectureDetailIndex,
    required this.week,
    required this.lectureStartDate,
    required this.lectureEndDate,
    required this.lectureStartTime,
    required this.lectureEndTime,
  });


  factory LectureDetailInfoModel.fromJson(Map<String, dynamic> json) {
    return _$LectureDetailInfoModelFromJson(json);
  }
}

기존코드 factory부분을 보면 return 부분이 변경된게 보입니다.

 

자동으로 만들어진 .g.dart 파일에 있는 함수를 사용한것입니다.

저 함수명 그대로 복사해서 return 에 넣고 인자로는 Map<String, dynamic> json 을 받기때문에 기존코드 그대로 json을 넘겨주기만 하면 끝입니다.

 

 

 

 

 

추가로

추가로 .g.dart 파일은 직접적으로 수정하시면 안됩니다.

 

그리고 지금 .g.dart 파일을 보시면 

week: json['week'] as String,

이렇게 week에 있는 값을 String으로 넣어줍니다.

"이번주는 ${json["week"]}"  이런식으로 바꿔주고싶으면 .g.dart 파일은 건들면 안되고

 

import 'package:json_annotation/json_annotation.dart';

part "lecture_detail_info_model.g.dart";

@JsonSerializable()
class LectureDetailInfoModel {
  final int lectureDetailIndex;
  @JsonKey(
    fromJson: weekText,
  )
  final String week;
  final String lectureStartDate;
  final String lectureEndDate;
  final String lectureStartTime;
  final String lectureEndTime;

  LectureDetailInfoModel({
    required this.lectureDetailIndex,
    required this.week,
    required this.lectureStartDate,
    required this.lectureEndDate,
    required this.lectureStartTime,
    required this.lectureEndTime,
  });

  factory LectureDetailInfoModel.fromJson(Map<String, dynamic> json) {
    return _$LectureDetailInfoModelFromJson(json);
  }

  static weekText(String week) {
    return "이번주는 $week";
  }
}

코드에서 변경하고싶은 데이터 생성자 위에 @JsonKey annotation 을 추가해줍니다.

그리고 fromJson : 스타틱함수  

fromJson을 할때 이 함수를 실행시켜줘라고 명시해줍니다.

 

static weekText(String week) {}  < 이 함수를 시켜주라고 명시한겁니다.

인자값으로 넘기지는 않았지만 자동으로 해당 생성자에 들어갈 값이 들어가서 함수를 한번 걸치고 그 함수에서 나온값으로 초기화가 되는겁니다.

 

그리고 다시 터미널에서 flutter pub run build_runner build 를 해주세요. 그리고 .g.dart파일을 다시 보면

 

 

위에서 설정한대로 자동으로 파일이 생성된것을 확인할 수 있습니다.