[060] 플러터 (Flutter) 배우기 - freezed 사용하기 1

2023. 4. 28. 15:11모바일어플개발/Flutter

반응형

안녕하세요~ totally 개발자입니다. 먼저 이 포스팅 보시기에 앞서 지난 059 포스팅의 immutable 객체에 대한 사전 이해가 필요하기 때문에 먼저 보고 이 포스팅을 보기를 권장합니다.

 

https://totally-developer.tistory.com/136

 

[059] 플러터 (Flutter) 배우기 - immutable 객체 사용하기

안녕하세요~ totally 개발자입니다. immutable 이번 시간에는 플러터에 사용되는 Dart 강좌로 오늘은 immutable 객체에 대해서 살펴보도록 하겠습니다. immutable 말그대로 "불변의, 변경할 수 없는"이라는

totally-developer.tistory.com

 

Freezed

 

이 포스팅에서는 freezed에 관해 살펴보도록 하겠습니다. 지난 포스팅에서는 immutable, 불변의 키워드를 사용해서 클래스의 인스턴스(객체)를 변경할 수 없도록 조치하였습니다. 다만 이 방법은 copy, copyWith 등 여러 메소드를 길게 작성해야 하기 때문에 여러 클래스가 있는 규모가 다소 큰 프로젝트에서는 오히려 복잡할 수 있습니다. 따라서 플러터 패키지들 중에 freezed 패키지를 사용하면 이를 획기적으로 간단하게 사용할 수 있습니다. 자세한 내용은 아래 링크로 참고하시기 바라고 저는 어떻게 이 freezed를 간단하게 사용할 수 있는지에 대해 실습을 통해 소개하도록 하겠습니다.

 

https://pub.dev/packages/freezed

 

freezed | Dart Package

Code generation for immutable classes that has a simple syntax/API without compromising on the features.

pub.dev

 

Step 1: 이 freezed가 왜 도입되었는지에 대한 이유를 앞서 설명드린대로 이해하셔야 하는데 위 링크를 통해 보시면 Motivation으로 설명이 되어 있습니다. 중요한 부분들만 해석을 통해 살펴보겠습니다.

 

 

Dart is awesome, but defining a "model" can be tedious.

다트는 훌륭하지만, "모델"을 정의하는 것은 지루한 작업일 수 있습니다.

 

implement a copyWith method to clone the object.

객체를 복제하기 위한 copyWith 메소드를 만들어서 구현합니다.

 

Implementing all of this can take hundreds of lines, which are error-prone and affect the readability.

이 모든 것(코드)을 구현하는 것은 수백 줄의 코드를 필요로 하며 이 코드들에는 에러가 발생하기 쉽고, 가독성에도 영향을 미칩니다.

 

Freezed tries to fix that by implementing most of this for you, allowing you to focus on the definition.

Freezed는 이러한 점을 보완하여 위에 업급된 대부분의 사항을 구현하고, 개발자가 그 정의에 집중할 수 있도록 합니다.

 

즉 Freezed는 immutable 객체 방법에서 썼던 코드의 길이를 획기적으로 줄여 에러 발생을 최대한 억제하고 가독성을 높이기 위해 사용하는 것입니다.

 

 

Step 2: pubspec.yaml에 다음처럼 추가합니다.

 

 

Step 3: marine.dart 파일을 하나 생성한 후 다음처럼 입력합니다.

 

 

 

Step 4: 터미널에 flutter pub run build_runner build를 입력합니다.

 

 

Step 5: 여기 이렇게 3 outputs 이렇게 나와야 합니다 만약 0 output 이렇게 나온다면 pubspec.yaml 부분이 제대로 반영이 되지 않았거나 위 marine.dart 파일에 오류 또는 제대로 저장이 안 된 경우입니다. 아래 marine.freezed.dart, marine.g.dart 파일이 제대로 생성되면 성공입니다.

 

 

 

Step 6: 생성된 파일들은 보시면 자동으로 이렇게 코드가 채워져 있는 것을 확인해볼 수 있습니다.

 

marine.freezed.dart

 

marine.g.dart

 

 

Step 7: freezed의 기능인 hashCode override 부분을 테스트해보도록 합니다. 일반적인 비교를 위해 zealot.dart 파일을 만들고 일반 Zealot 클래스를 만들어서 넣어봅니다.

 

 

test.dart 파일을 하나 생성해주시고 main 함수를 작성하여 질럿 2마리와 마린 2마리를 같은 속성으로 생성합니다. 그리고 아래처럼 비교해봅니다. 근데 맨 아래에 터미널에 결과를 보시면 질럿은 다른 질럿이라 나오고 마린은 같은 마린이라고 나오는 것을 확인해볼 수 있습니다. 이 이유는 근본적으로 클래스의 인스턴스 비교(==)는 메모리 위치를 비교하게 되지만 freezed를 사용한 비교에서는 클래스의 모든 property(속성)의 조합으로 ==와 hashCode 함수를 재정의하여 비교하게 되어 같은 것으로 나오게 됩니다. 

 

 

 

Step 8: 이번에는 deepCopy를 해보도록 하겠습니다. 저번 시간에 직접 immutable 객체는 인스턴스의 변수를 변경할 수 없다고 했고 이를 위해서는 새로운 객체를 기존 객체를 복사함으로 생성함으로 변경한다고 하였습니다. 아래처럼 바로 copyWith 메소드를 사용할 수 있습니다.

 

위처럼 결과가 잘 나오는 것을 알 수 있습니다. toJson, fromJson도 당연히 사용 가능하며 freezed는 union 기능도 제공하는데 다음 포스팅에서 이 부분에 대해 살펴보도록 하겠습니다.

반응형