flutter model 생성기

웹이나 앱쪽 프론트를 개발하는 경우 서버인 백엔드와의 소통은 보통 JSON으로 많이 하게된다. flutter 역시 JSON을 바탕으로 서버와 하는데 그냥 JSON 을 바로 사용하지않고 model을 만들어 사용한다. flutter를 시작하면서 처음으로 model을 만들어봤다.

JSON 직렬화

공식문서에 의하면 자료구조를 문자열로 변환하는과정을 지칭한다. 하지만 직렬화는 일반적으로 자료 구조를 보다 읽기 쉬운 형태로 변환하는 과정을 가리키기도 한다고한다. 반대과정은 역직렬화라고한다. Json을 flutter에서 사용할 수 있게끔 model로 변경하는 방법에는 몇가지가 있지만 json_serializable을 통한 코드를 통한 자동생성과정을 언급하려한다.

import 'package:json_annotation/json_annotation.dart';

/// 이 구문은 `User` 클래스가 생성된 파일의 private 멤버들을
/// 접근할 수 있도록 해줍니다. 여기에는 *.g.dart 형식이 들어갑니다.
/// * 에는 소스 파일의 이름이 들어갑니다.
part 'user.g.dart';

/// 코드 생성기에 이 클래스가 JSON 직렬화 로직이 만들어져야 한다고 알려주는 어노테이션입니다.
@JsonSerializable()

class User {
  User(this.name, this.email);

  String name;
  String email;

  /// map에서 새로운 User 인스턴스를 생성하기 위해 필요한 팩토리 생성자입니다.
  /// 생성된 `_$UserFromJson()` 생성자에게 map을 전달해줍니다.
  /// 생성자의 이름은 클래스의 이름을 따릅니다. 본 예제의 경우 User를 따릅니다.
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  /// `toJson`은 클래스가 JSON 인코딩의 지원을 선언하는 규칙입니다.
  /// 이의 구현은 생성된 private 헬퍼 메서드 `_$UserToJson`을 단순히 호출합니다.
  Map<String, dynamic> toJson() => _$UserToJson(this);

공식문서에 예시로 나와있는 User라는 model을 생성하는code이다. 아마 처음 저 코드를 활용하려하면 에러가 뜰텐데 정상이니 flutter pub run build_runner build 명령어를 입력해보자 에러가 사라지면서 직렬화 코드가 생겨난다.

Attribute _$AttributeFromJson(Map<String, dynamic> json) => Attribute(
    name: json['name'] as String,
    locales: Map<String, String>.from(json['locales'] as Map),
  );

Map<String, dynamic> _$AttributeToJson(Attribute instance) => <String, dynamic>{
    'name': instance.name,
    'locales': instance.locales,
  };

위의 코드는 내가 사용중인 코드의 일부분인데 위의 명령어를 사용하면 다음과같이 코드가 자동으로 생성된다. 이를 활용하여 flutter에서 model을 활용하여 간편하게 json자료에 접근할수 있고 반대도 마찬가지로 가능하다.

느낀점

이전까지 json을 활용한 경험은 React에서의 경험이 전부라 위에서 언급한것처럼 model을 만드는 경험은 처음이었다. 그래서 그런가 model만드는거자체도 살짝 낯설었고 활용은 더더욱 낯설었던거같다. 지금도 완벽하게 이해했다고 말하기에는 어려울수있지만 적어도 이렇겠는구나 감은 잡은거같다.

참고

https://flutter-ko.dev/docs/development/data-and-backend/json