[Flutter] Bloc Concurrency 라이브러리에 대해서 알아보자

이번 포스팅은 Flutter Bloc의 비동기 이벤트 처리방식에 도움을 주는 Bloc Concurrency 라이브러리에 대해서 알아보겠습니다.

 

소개

Bloc Concurrency

공식홈페이지 설명에 따르면

bloc_concurrency 패키지는 ember concurrency에서 영감을 받아 만들어진

사용자 정의 이벤트 변환기를 제공하는 Dart 패키지입니다.

이 패키지는 bloc 상태 관리 패키지와 함께 사용되도록 설계되었습니다.

bloc_concurrency는 bloc에서 이벤트를 처리하는 방식을 관리하는 데 도움이 되는 이벤트 변환기를 제공합니다.

 

ember concurrency에서 영감을 받았다고 하는데 ember concurrency는 무엇일까요?

ember concurrency는 쉽게 말해 비동기처리를 보다 쉽게 간결하게 만들어주는 라이브러리 입니다.

ember.js는 Angular, Vue.js, React와 같은 웹 프레임워크 인데,

웹에서 사용되는 기술을 Flutter Bloc에도 적용된 것이 bloc_concurrency입니다.

 

그럼 Bloc의 기본 비동기 이벤트 처리방식에 대해서 알아보겠습니다 .

 

포함된 이벤트 변환기

1. concurrent - 이벤트를 동시에 처리할 수 있게 해줍니다.
2. sequential - 이벤트를 받은 순서대로 차례대로 처리하도록 보장합니다.
3. droppable - 이벤트가 처리되는 동안 추가된 이벤트를 무시합니다.
4. restartable - 가장 최근의 이벤트만 처리하고 이전의 진행 중인 이벤트 핸들러를 취소합니다.

공식 홈페이지에 따르면 4가지의 이벤트 변환기 세트를 제공한다고 합니다. 

 

상황을 만들어서 하나씩 설명해보겠습니다.

 

상황 : 이미지 생성 버튼을 마구 눌렀을 경우

1. concurrent - 이벤트가 동시에 처리되어 처리가 되는 순서대로 이미지 생성이 될 것 입니다.
2. sequential - 버튼을 누른 순서대로 차례대로 이미지가 생성될 것 입니다.
3. droppable - 처음 이미지가 생성 동안 추가된 이미지 생성 이벤트는 무시합니다. 
4. restartable - 가장 마지막에 누른 이미지 생성 이벤트만 처리하고 이전의 진행 중인 이미지 생성 이벤트들은 취소합니다.

 

예시 코드는 아래와 같습니다.

import 'package:bloc/bloc.dart';
import 'package:bloc_concurrency/bloc_concurrency.dart';

sealed class CounterEvent {}

final class CounterIncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncrementPressed>(
      (event, emit) async {
        await Future.delayed(Duration(seconds: 1));
        emit(state + 1);
      },
      /// Specify a custom event transformer from `package:bloc_concurrency`
      /// in this case events will be processed sequentially.
      transformer: sequential(),
    );
  }
}

---

참고링크

https://pub.dev/packages/bloc_concurrency