🛸 copyWith에 NULL 사용하는 방법

copyWith로 Nullable 변수 사용해 보기

이번에는 Flutter에서 class 사용시 객체의 데이터를 변경하는 방법 중 하나인 copyWith 사용시 NULL 값을 사용하는 방법에 대해 다뤄보도록 하겠다.

이전에 이미 copyWith로 Nullable 변수 사용해 보기 포스트를 작성한 적이 있었는데, 업데이트 내용이 있어 추가로 작성하게 되었다.

copyWith는 Flutter에서 사용하는 대표적인 class copy 방법으로 이미 많이 사용되고 있다.

copyWith는 모델 클래스를 만드는 패키지에 포함되는 기능 중 하나이며, 흔하게 사용하는 TextStyle이 copyWith를 사용해 스타일 변경을 하도록 개발되어 있다.

이러한 모델 클래스를 만들 때에는 copyWith 외에도 json 변환 등의 기능도 사용해야 하므로, 이를 Code Generator로 편하게 생성해 주는 패키지인 freezed가 있으니 한 번쯤 사용해 보는 것도 좋다.

여기서는 freezed 등의 패키지를 사용하는 것이 아닌 직접 class를 생성해서 사용하는 경우의 copyWith에 대해서 다루는 내용이 될 것이다.

copyWith ?

먼저, copyWith에 NULL 값을 사용하기 위해서는 copyWith를 어떻게 만드는지에 대해서 알아보도록 하자.

대부분이 copyWith 만드는 방법과 작동 방식에 대해 이해하고 있을 것이라 생각하지만, 혹시라도 모르시는 분들이 있을 수 있으니 간단하게 만드는 방법을 다뤄보자.

사용자 이름과 이메일이 있는 User 객체를 생성해 주도록 하는데, 여기서 이름을 nullable 타입으로 만들어 주도록 하자.

class User {
  final String email;
  final String? name;
  
  const User({
    required this.email,
    required this.name,
  });
}

해당 User 클래스에 copyWith를 추가해주자.

copyWith는 생성된 User 클래스에서 모든 파라미터를 nullable 타입을 사용해 null인 경우 기존 User 클래스의 값을 리턴하도록 하는 원리를 통해서 copy 기능을 만드는 것이다.

User copyWith({
	final String? email,
    final String? name,
  }){
    return User(
      email: email ?? this.email,
      name: name ?? this.name,
    );
  }

이제 copyWith를 사용하면 이렇게 원하는 데이터만 변경해 줄 수 있게 된다.

User _tyger = User(email: "tyger@tyger.com", name: "tyger");
_tyger = _tyger.copyWith(email: "tyger1@tyger.com");
print(_tyger.email);

// tyger1@tyger.com

copyWith는 해당 클래스 안에 넣어서 선언해 주면 된다.

class User {
  final String email;
  final String? name;
  const User({
    required this.email,
    required this.name,
  });

  User copyWith({
    final String? email,
    final String? name,
  }) {
    return User(
      email: email ?? this.email,
      name: name ?? this.name,
    );
  }
}

NULL

왜 copyWith는 Nullable 타입을 사용할 수 없는 것일까?

정확히는 Nullable 변수를 사용을 못하는 것이 아닌, null 값으로는 변경이 불가하다고 이해하면 될 것 같다.

위에서 copyWith 생성하는 방법을 살펴보면 모든 변수를 nullable 타입으로 생성하여 변수가 없는 경우 기존 값을 리턴하는 구조로 되어 있는 것을 알 수 있다.

이렇기 때문에 null 값을 넣어도 null로 변경되지 않고 기존 값을 리턴하게 되기 때문에 nullable 타입에 값이 지정되면 다시 null로 변경할 수 없는 것이다.

User tyger = User(email: "tyger@tyger.com", name: "tyger");
tyger = tyger.copyWith(name: null);
print(tyger.name);

// tyger

이 부분의 name이 null이면, this.name을 리턴하게 되면서 null 값으로 다시 변경할 수 없는 것이다.

name: name ?? this.name,

copyWith 만드는 방법과 원리에 대해서는 가볍게 알아 봤고, 왜 null 값으로 변경되지 않는지에 대해서도 알아 봤다.

이제부터는 null 값으로 변경할 수 있는 3가지 방법에 대해서 다루도록 하겠다.

1,2 번째 방법은 이전 포스트에서 다뤄본 내용이고 마지막으로 소개하는 3번째 방법이 새로 업데이트한 방법이다.

copyWith로 Nullable 변수 사용해 보기

1. Function

첫 번째 방법은 Function을 사용해 null 값을 주는 방법인데, 사실 제가 가장 추천하지 않는 방법이기도 하다.

copyWith에서 nullable 변수에 function 값을 허용하여 null인 경우 function을 전달 받도록 하는 방법이다.

Product 객체의 sale 변수를 nullable 타입으로 만들어 주도록 하자.

class Product {
  final String name;
  final int price;
  final double? sale;

  const Product({
    required this.name,
    required this.price,
    required this.sale,
  });
}

copyWith에 nullable 타입에 해당하는 sale 변수의 값을 Function 함수 형태를 사용하여 생성해주자.

Fuction()을 전달 받는데, 리턴 값으로 double? 값을 리턴하도록 하고 있다.

sale 부분의 sale 값이 null이 아닌 경우 function()인 sale()을 넣어주고, null이면 기존 값을 사용해 생성할 수 있도록 this.sale을 넣어줄 수 있게 해주었다.

Product copyWith({
	final String? name,
	final int? price,
	final double? Function()? sale,
  }) {
	return Product(
      name: name ?? this.name,
      price: price ?? this.price,
      sale: sale != null ? sale() : this.sale,
    );
}

이렇게 생성하여 copyWith에 데이터를 전달할 때에도 function 함수 형태로 전달하면 된다.

이 방법의 가장 큰 단점은 변수 타입을 전달할 수 없고, 항상 function 함수를 전달해야 한다는 단점이 있다.

간단하게 copyWith에서 NULL 값을 전달할 수는 있지만, 변수 타입을 그대로 사용하지 못한다는 점에서 추천하지 않는 방법이다.

void main() {
  Product _product = Product(
    name: "product",
    price: 1000,
    sale: 0.2,
  );
  print(_product.sale);
  // 0.2
  
  _product = _product.copyWith(sale: () => 0.5);
  print(_product.sale);
  // 0.5
  
  _product = _product.copyWith(sale: () => null);
  print(_product.sale);
  // null
}

2. Variable

이번에는 null 값을 사용하기 위한 추가 변수를 사용하는 방법이다.

동일하게 Product 객체를 생성해주자.

copyWith 생성시 nullable 타입 변수에는 boolean 타입의 새로운 변수 타입을 추가해 주었다.

boolean 타입의 nullSale 변수를 기본 값으로 false로 주어 추가하면 된다.

sale 변수에 nullSale이 true인 경우에 null 값을 주고, 아닌 경우에는 다른 변수들과 동일하게 sale ?? this.sale 값을 주도록 해주면 된다.

  Product copyWith({
    final String? name,
    final int? price,
    final double? sale,
    final bool nullSale = false,
  }) {
    return Product(
      name: name ?? this.name,
      price: price ?? this.price,
      sale: nullSale ? null : (sale ?? this.sale),
    );
  }

sale 변수에 null 값을 주고 싶으면, 추가한 nullSale 변수를 사용해 해당 변수를 true로 주면 된다.

이 방법의 단점은 변수가 늘어난다는 점에 있다. 만일 nullable 타입의 변수가 많다면 boolean 타입의 변수를 똑같이 생성해 주어야 하기 때문에 변수가 많아지게 된다.

void main() {
  Product _product = Product(
    name: "product",
    price: 1000,
    sale: 0.2,
  );
  print(_product.sale);
  // 0.2

  _product = _product.copyWith(nullSale: true);
  print(_product.sale);
  // null

  _product = _product.copyWith(sale: 0.4);
  print(_product.sale);
  // 0.4
}

또한 데이터가 null일 수도 null이 아닐 수도 있는 경우에도 boolean 타입에도 중복적으로 데이터를 전달해 주어야 한다는 점이 단점이다.

double? getSale(double? data) => data;

이렇게 null일지 아닐지 모르는 케이스의 변수를 변경하고자 할 때에, 항상 기존 sale 변수와 null 값을 전달하기 위한 nullSale boolean 변수를 같이 사용해야 하게 된다.

void main() {
  Product _product = Product(
    name: "product",
    price: 1000,
    sale: 0.2,
  );
  print(_product.sale);
  // 0.2

  double? _newSale = getSale(null);

  _product = _product.copyWith(sale: _newSale, nullSale: _newSale == null);
  print(_product.sale);
  // null
}

3. Abstract class

이번에 추가되는 새로운 방법이 가장 추천하는 방법이다.

위에서 살펴본 방법 처럼 function() 타입을 사용하지 않아도 되고, boolean 변수를 추가하여 사용하지 않아도 된다.

기존 객체 그대로를 사용할 수 있다. 하지만 작성해야 하는 코드가 많다는 점이 단점일 수도 있다.

이 방법은 조금 복잡할 수도 있고, 추상 클래스에 대한 개념이 있어야 해서 이해가 어려울 수도 있으니 천천히 하나씩 해보면서 이해하시면 쉽게 이해할 수 있다.

추상 클래스와 클래스를 함수처럼 호출되도록 하는 method를 활용하는 방법인데, 객체를 그대로 사용한다는 점에서 메리트가 가장 있는 방법이라고 본다.

먼저 객체를 동일하게 생성해 보도록 하자.

class Product {
  final String name;
  final int price;
  final double? sale;

  const Product({
    required this.name,
    required this.price,
    required this.sale,
  });
}

이번엔 copyWith 기능을 만들기 전, ProductCopyWith라는 추상 클래스를 먼저 생성해주도록 하겠다.

추상 클래스에 인스턴스가 함수처럼 호출될 수 있도록 해주는 call() 함수를 추가해 인터페이스를 생성하도록 하였다.

abstract class ProductCopyWith {
  Product call({
    String name,
    int price,
    double? sale,
  });
}

생성한 추상 클래스를 implements를 사용해 상속받은 객체를 만들어 주도록 하자.

ProductCopyWith 추상 클래스를 상속 받는 객체는 _ProductCopyWith 라는 객체로 생성해 주도록 하겠다.

여기서 추상 클래스나 상속 받은 클래스의 이름은 자유롭게 해도 된다. 꼭 저 키워드를 사용하라는 법은 없으니, 편한 방법으로 클래스 명을 만들면 된다.

class _ProductCopyWith implements ProductCopyWith {
	// ...
}

상속 받은 _ProductCopyWith 클래스에는 Product 객체와 Object 타입의 객체 2개를 추가하도록 하겠다.

class _ProductCopyWith implements ProductCopyWith {
  final Product value;
  static const Object _undefined = Object(); 
  
  const _ProductCopyWith(this.value);
}

_ProductCopyWith 객체에 상속받은 call() 기능을 재정의해 주도록 하자.

abstract class에서 call() 함수를 생성할 때에 name, price, sale을 받아올 수 있게끔 생성했었다.

여기서는 타입을 Object nullable 타입으로 해주고, 기본 값으로 _undefined를 정의해 주면 된다.

입력받은 변수가 _undefined와 같다면 _ProductCopyWith 에서 받아온 Product의 값을 리턴하면 되고, 아닌 경우에는 copy() 함수를 통해 전달받은 값을 리턴해주면 된다. 이 때 Object를 타입 캐스트하여 리턴해야 한다.

  @override
  Product call({
    Object? name = _undefined,
    Object? price = _undefined,
    Object? sale = _undefined,
  }) {
    return Product(
      name: name == _undefined ? value.name : name as String,
      price: price == _undefined ? value.price : price as int,
      sale: sale == _undefined ? value.sale : sale as double?,
    );
  }

지금까지 사용하는 방법과는 다르게 nullable 타입의 변수에 null 값을 주면 된다.

void main() {
  Product _product = Product(name: "product", price: 1000, sale: 0.2);
  print(_product.sale);
  // 0.2

  _product = _product.copyWith(sale: null);
  print(_product.sale);
  // null
  
  _product = _product.copyWith(sale: 0.1);
  print(_product.sale);
  // 0.1
}

이번에 살펴본 방법은 코드가 복잡하고 클래스를 추가 생성해야 하는 부분에서 단점일 수 있겠지만, 사용 방법을 가장 심플하게 사용한다는 점에서 가장 추천하는 방법이다.

Source Code

전체 코드이다.

class Product {
  final String name;
  final int price;
  final double? sale;

  const Product({
    required this.name,
    required this.price,
    required this.sale,
  });

  ProductCopyWith get copyWith => _ProductCopyWith(this);
}

abstract class ProductCopyWith {
  Product call({
    String name,
    int price,
    double? sale,
  });
}

class _ProductCopyWith implements ProductCopyWith {
  final Product value;
  static const Object _undefined = Object();

  const _ProductCopyWith(this.value);

  @override
  Product call({
    Object? name = _undefined,
    Object? price = _undefined,
    Object? sale = _undefined,
  }) {
    return Product(
      name: name == _undefined ? value.name : name as String,
      price: price == _undefined ? value.price : price as int,
      sale: sale == _undefined ? value.sale : sale as double?,
    );
  }
}

---

마무리

지금까지 class의 copyWith 기능을 직접 생성할 때에, nullable 타입의 변수에 NULL 값이 전달되지 않는 부분에 대해서 NULL 사용에 대한 3가지의 방법을 살펴봤다.

이전 글에서 2가지의 방법에 대해서 이미 살펴봤고, 추가로 새로운 방법을 제시하게 되었는데, 제가 가장 추천하는 방법은 이번에 추가된 방법이긴 하나 개발자 본인의 선택으로 원하는 방법을 사용하시면 된다.

추가로 새로운 방법을 찾게 되면 공유하도록 하겠다.