[Flutter] @JsonSerializable()와 @JsonKey 사용법

Flutter에서 서버와 데이터를 주고받을 때 JSON 형태를 자주 사용할텐데

JSON 데이터를 다루다 보면, 필드 이름이 다르거나 데이터 타입을 맞춰야 하는 문제가 생길 수 있다.

이 때 json_serializable 패키지를 활용해서 JSON 데이터를 다루는 방법을 알아보자

---

@JsonSerializable()란?

@JsonSerializable()

• 클래스가 JSON 데이터를 쉽게 변환할 수 있도록 도와주는 어노테이션
• 이 어노테이션을 class 키워드 위에 선언하면 됨
• JSON 데이터를 Dart 객체로 변환fromJson()하거나
  반대로 Dart 객체를 JSON으로 변환toJson()하는 코드를 자동으로 생성

사용 방법

1. json_serializable과 build_runner 패키지 설치

dependencies:
  json_annotation: ^4.8.0

dev_dependencies:
  build_runner: ^2.4.0
  json_serializable: ^6.6.0

2. • import 'package:json_annotation/json_annotation.dart'; 필요한 파일에 import
   • part 키워드로 생성될 .g.dart 파일을 연결 필요한 파일에 import

---

@JsonKey란?

@JsonKey

• JSON 데이터와 Dart 객체의 필드 이름이 다를 때 매핑을 도와주는 어노테이션
• 예) 서버에서 받은 JSON 데이터의 키 이름이 date인데,
  Dart 객체에서는 completedDate라는 이름을 쓰고 싶다면 @JsonKey로 매핑

사용 방법

@JsonKey(name: 'date')
String? completedDate;

이렇게 하면, JSON 데이터의 date 값을 Dart 객체의 completedDate에 매핑할 수 있어.

---

예제 코드

JSON 데이터를 Dart 객체로 변환하는 과정을 간단한 예제로 살펴보자

1. 클래스 정의

import 'package:json_annotation/json_annotation.dart';

part 'example.g.dart';

@JsonSerializable()
class Example {
  String? id;
  @JsonKey(name: 'user_name')
  String? userName;

  Example({this.id, this.userName});

  factory Example.fromJson(Map<String, dynamic> json) =>
      _$ExampleFromJson(json);
  Map<String, dynamic> toJson() => _$ExampleToJson(this);
}

2. JSON 변환 예제

서버에서 다음과 같은 JSON 데이터를 받았다고 가정해보자

{
  "id": "123",
  "user_name": "Doyeon"
}

이 데이터를 Dart 객체로 변환하려면 아래처럼 사용할 수 있어

void main() {
  // JSON 데이터를 Dart 객체로 변환
  final json = {"id": "123", "user_name": "Doyeon"};
  final example = Example.fromJson(json);

  print(example.userName); // 출력: Doyeon

  // Dart 객체를 JSON으로 변환
  final newJson = example.toJson();
  print(newJson); // 출력: {id: 123, user_name: Doyeon}
}

---

코드 자동 생성

build_runner를 사용해 Dart 객체와 JSON 데이터를 변환해주는 파일을 생성해야됨

1. 해당 프로젝트 루트 폴더에서 다음 명령어 실행

flutter pub run build_runner build

2. 그러면 example.g.dart라는 파일이 생성됨
3. 이 파일에는 fromJson과 toJson 함수가 자동으로 작성되어 있어.

---

정리

• @JsonSerializable(): 클래스를 JSON 변환이 가능하도록 만들어주는 어노테이션
• @JsonKey: JSON 키와 클래스 필드 이름을 매핑할 때 사용
• fromJson / toJson: JSON과 Dart 객체 간의 변환을 담당하는 함수

json_serializable 패키지를 사용하면 반복적인 JSON 변환 코드를 줄이고, 더 간결하고 안전한 코드를 작성할 수 있다. 🙂