Flutter의 Freezed 사용하기

이번에는 Freezed에 대해서 살펴보도록 하자.

 

공식 페이지의 가장 상단에 적혀있는 Motivation에서도 알 수 있듯 Freezed는 다양한 기능을 제공하는 Code Generator이다. 

 

Freezed의 대표적인 기능은 Json_Serializable과 Deep Copy 기능이있다.

Json_Serializable 기능은 네트워크 통신을 하게 되면 json이나 xml 형태의 데이터를 가져오게 되는데, 이러한 형식의 데이터를 바로 사용할 수 없기 때문에 변환과정을 거쳐야 한다. 이러한 과정을 도와주는 역할을 하는것이다.

Deep Copy 기능은 main의 MyApp에서 theme를 설정 해준 값을 가져오면서 세세하게 설정을 수정하며 사용했던 방법으로, 아주 유용했다.

 

Freezed는 annotation 기능을 사용해서 Code Generator 기능을 실행한다. 일반적으로 클래스에 property를 선언할때 클래스 내부에 변수들을 미리 선언해 두고 constructor로 변들을 클래스의 변수에 입력을 해주게 되는데, Freezed의 경우 factory constructor를 사용하면 클래스 내부에서 변수정의를 따로 해 줄 필요가 없다. 

 

freezed를 사용하기 위해서는 part를 선언해주어야 하는데, 이는 선언만 해주면 생성은 자동으로 해준다.

'part {fileName}.freezed.dart' 그리고 'part {fileName}.g.dart'를 추가해주고, fromJson  factory 함수를 추가해주면 된다.

import 'package:freezed_annotation/freezed_annotation.dart';

part 'models.freezed.dart';
part 'models.g.dart';

@freezed
class MemberModel with _$MemberModel {
  const factory MemberModel({
    String id,
    String member_status,
    String name,
    String login_id,
    String nickname,
    DateTime updated_at,
    String upload_data,
  }) = _MemberModel;

  factory MemberModel.fromJson(Map<String, Object?> json) =>
      _$MemberModelFromJson(json);
}

그리고 터미널에 다음 명령어를 입력해주면 된다.

flutter pub run build_runner build

 

 

그러고나면 자동으로 파일과 코드를 생성해주는데 생성된 파일은 수정할 필요가 없다.

 

Json_Serializable

네트워크 통신으로 부터 받아서 저장할때는 fromJson을 활용하고 반대로 전송할 때는 toJson으로 사용한다.

// toJson
MemberModel memberModel;
memberModel.toJson();

// fromJson
MemberModel memberModel = MemberModel.fromJson(_response.data);

DeepCopy

객체의 원하는 변수 값을 일부 변경할 수 있는 기능이다. 만일 통신으로 받아온 데이터에서 일부만 수정해야 할때 사용할 수 있다. 

 

아래의 예시 같이 MemberModel의 name만을 수정해야 한다면, 새로운 MemberModel을 새로 다시 만드는것이 아니고 일부분만 수정한 MemberModel을 손쉽게 만들 수 있다.

MemberModel _memberModel = MemberModel(
	id: 'userId', 
    member_status: 'member_status', 
    name: 'name', 
    nickname: 'nickname', 
)

// copyWith
_memberModel = _memberModel.copyWith(name: 'userName');

when

사실 이건 사용은 하고 있었는데 Freezed의 기능이였는지는 이번에 공식문서를 다시금 꼼꼼히 읽으면서 알게 되었다.

네트워크 통신의 결과를 보여줄때 무척이나 용이하게 사용할 수 있다.

class MypagePage extends HookConsumerWidget {
  const MypagePage(this.dailyItems, {super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    var memberModel = ref.watch(meProvider);
    
    return memberModel.when(
      data: (member) => SingleChildScrollView(),
      error: (e, s) => const Center(
        child: Text('로딩 중 에러가 발생했습니다'),
      ),
      loading: () => const Center(
        child: CircularProgressIndicator.adaptive(),
      ),
    );
  }
}

 

이런식으로 memberModel의 값을 구독하며 각각의 상태에 맞는 화면을 구현할 수 있도록 해준다. 

 

일단은 모델을 작성하는 코드가 몹시도 간편하고, 부수적인 기능들에 있어서도 몹시도 훌륭한 편이기 때문에 앞으로 프로젝트를 함에 있어 거의 필수적으로 사용할것 같다.

 

 

 

freezed | Dart package

 

build_runner | Dart package