[Flutter] Bloc & Cubit

flutter_bloc과 bloc 패키지에서는 Bloc패턴을 활용한 상태관리를 보다 편리하게 구현할 수 있도록 Bloc과 Cubit이라는 클래스가 존재한다.

Bloc을 사용하면서 이 두가지 클래스 중 어떤 것을 사용하는 것이 더 좋을까라는 궁금증이 있었는데 이러한 궁금증을 해소하기 위해 두 클래스의 차이점을 비교해보았다.

둘 다 UI에서 발생한 이벤트를 통해 데이터의 상태를 변화시키고 이를 emit 함수를 통해 UI에 반영하는 과정을 수행하지만 약간의 차이점이 존재한다.

Bloc

• Cubit에 비해 많은 기능을 제공한다.
  - on함수 안에 transformer를 통해 debounce와 같은 고급 처리를 수행할 수 있다.
• 정의된 Event를 add함수를 통해 전달함으로서 데이터의 상태를 변화시킨다.
• UI가 비즈니스 로직을 직접 알 필요가 없어 UI와 비즈니스 로직이 분리된다.
• 호출 이벤트 및 상태 변경 모두 Stream이다.

Cubit

• Bloc의 열화판
• Bloc에 비해 상대적으로 Bolierplate가 적다.
• 사용자가 작성한 비즈니스 로직을 직접 호출해서 데이터의 상태를 변화시킨다.
• 호출되는 메서드는 Stream이 아니다
  - Cubit의 메서드를 호출할 때는 Stream이 아니지만, emit을 통해 변경된 상태가 UI에 반영될 때는 Stream으로 전달된다.

이러한 차이점을 예제를 통해 보면 아래와 같다.

//Date model
class City {
  final String name;
  final String country;

  City({this.name='', this.country=''});
}

우선 예제 작성을 위해 위와 같은 City 모델을 만들었다.

• Cubit

class CityCubit extends Cubit<City> {
  CityCubit():super(City());

  void generateCity(String name, String country) {
    final City city = City(name: name, country: country);
    emit(city);
  }
}

• Bloc

class CityBloc extends Bloc<CityEvent, City> {
  CityBloc() : super(City()){
    on<GenerateCityEvent>(
      generateCity,
      transformer: debounce(const Duration(milliseconds: 300))
    );
  }

  FutureOr<void> generateCity(GenerateCityEvent event, Emitter<City> emit){
    final City city = City(name: event.name, country: event.country);
    emit(city);
  }

  EventTransformer<T> debounce<T>(Duration duration) {
   return (events, mapper) => events.debounceTime(duration).flatMap(mapper); 
  }
}

abstract class CityEvent {}

class GenerateCityEvent extends CityEvent{
  final String name;
  final String city;
  
  GenerateCityEvent({this.name = '', this.city = ''});
}

그래서 둘 중 뭘 쓸까?

앞으로 Bloc을 쓰면서 둘 중 하나만 쓰지는 않을 것 같다. 각각 개발에 맞게 알맞은 사용법이 있을 것 같다. 예를 들어

• Cubit
  - 단순한 CRUD의 경우 (아이템 추가, 삭제, 전체 목록 조회, 하나의 아이템 조회 등)
  - Async / Sync 작업을 구분해서 수행하고자 할 때
• Bloc
  - 필터링, 정렬, 검색 등 단순한 CRUD 이상의 작업이 필요한 경우
  - Cubit보다 확장된 기능을 사용하고자 할 때

이런 식으로 활용하지 않을까 싶다.