[Flutter] JsonSerializable 사용하기! Json Mapping 더 쉽게!

오늘은 JsonSerializable Library 를 활용해서 손쉽게 Json Data 를 맵핑하는 방법에 대해 작성했다.

 

1. Json Serializable 패키지를 설치한다.

json_serializable | Dart package

위 링크를 통해서 pubsec.yaml 파일에 추가 할 패키지 목록을 찾아 넣는다.

dependencies:
  json_annotation: ^4.9.0

dev_dependencies:
  build_runner: ^2.3.3
  json_serializable: ^6.8.0

 

2. Json Data 를 기반으로 모델 클래스를 만든다.

이때, Json Key 값과 동일한 변수이름을 갖도록하는게 좋다.

class RestaurantModel {
  final String id;
  final String name;
  final String thumbUrl;
  final List<String> tags;
  final RestaurantPriceRange priceRange;
  final double ratings;
  final int ratingsCount;
  final int deliveryTime;
  final int deliveryFee;

  RestaurantModel({
    required this.id,
    required this.name,
    required this.thumbUrl,
    required this.tags,
    required this.priceRange,
    required this.ratings,
    required this.ratingsCount,
    required this.deliveryTime,
    required this.deliveryFee,
  });
}

 

3. 상단에 'part' 구문을 작성해준다.

파일명뒤에 '.g.dart' 확장자를 붙여 사용하는데 .g 는 gerneration 의 의미로 생성된 이라는 의미

part 'restaurant_model.g.dart';

 

4. Class 선언부 바로 윗단에 '@JsonSerializable' 을 넣는다.

@JsonSerializable()
class RestaurantModel {
  final String id;
  final String name;
  final String thumbUrl;
  final List<String> tags;
  final RestaurantPriceRange priceRange;
  final double ratings;
  final int ratingsCount;
  final int deliveryTime;
  final int deliveryFee;

  RestaurantModel({
    required this.id,
    required this.name,
    required this.thumbUrl,
    required this.tags,
    required this.priceRange,
    required this.ratings,
    required this.ratingsCount,
    required this.deliveryTime,
    required this.deliveryFee,
  });
}

5. 후처리가 필요한 경우 '@JsonKey' 어노테이션을 이용해서 static 함수를 등록해 사용할 수 있다.

후처리가 필요한 경우, 생성자에 있는 변수 위에 다음과 같이 @JsonKey 와 'fromJson' 또는 'toJson' 파라미터에 입력하면 된다. 이때 입력 값은 static 함수만 입력 가능하다.

RestaurantModel({
    required this.id,
    required this.name,
    @JsonKey(
      fromJson: pathToUrl
    )
    required this.thumbUrl,
    required this.tags,
    required this.priceRange,
    required this.ratings,
    required this.ratingsCount,
    required this.deliveryTime,
    required this.deliveryFee,
  });

  static String pathToUrl(value){
    return 'http://$ip$value';
  }

 

6. Terminal 명령어로 'flutter pub run build_runner build' 또는 watch 를 입력한다.

여기에서 build 는 1회성 build 를 뜻하고, watch 는 변경사항이 생길 때 마다 계속 자동 생성되도록 하는 옵션이다.

 

7. 생성된 .fromJson 함수를 사용해서 model class 내에 factory 생성자를 작성한다.

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