[Dart/Flutter] BLoC Concepts - 훑어보기 (1)

 

아래의 링크의 BLoC  "시작하기 가이드" 문서를 보고 있다. 이 문서의 내용 중 BLoC Concepts 항목의 내용을 보고 있는데 "Cubit 사용하기" 섹션에서 나오는 코드를 작성하며 몇 가지 테스트를 해보았다.

https://bloclibrary.dev/ko/bloc-concepts/#cubit-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 

핵심 컨셉

 

위 링크의 문서 바로 위 항목인 "Cubit의 state 변화"의 코드를 참고하여 Cubit<int> 클래스를 상속 받은 CounterCubit 클래스를 생성하고 increment() 함수를 추가하였다. 그리고 main 함수에서 CounterCubit 객체를 생성하고 CounterCubit 객체의 increment() 함수를 한번 호출하였다.

 

increment() 함수는 emit을 호출하는 코드가 전부인데, 이는 CounterCubit 부모인 Cubit 객체에서 구현된 함수이다. 접근 권한이 protected라고 하는데, 그래서 Cubit을 상속받은 객체에서만 호출이 가능하다고 한다.

 

그런데 Dart 언어 문법에서 protected 접근 지정자가 있었나?

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

void main() {
  final cubit = CounterCubit();
  cubit.increment();
  print('${cubit.state}');
}

 

"시작하기 가이드"에서 지금 보고 있는 시점에서는 emit() 함수에 대한 설명은 없었다. 이후에 emit() 함수에 대한 내용에 나올 것 같다. 그러니 지금은 간단히 넘어가자.

 

실행 결과는 문서의 결과와 동일하게 출력되었다.

$ dart ./lib/main.dart 
1

 

이후 반복적으로 CounterCubit 객체의 increment() 함수를 호출해 보았다.

void main() {
  final cubit = CounterCubit();
  cubit.increment();
  print('${cubit.state}');
  cubit.increment();
  print('${cubit.state}');
  cubit.increment();
  print('${cubit.state}');
}

 

아마 1, 2, 3이 출력되리라는 것은 예상할 수 있을 것이고, 실제 결과도 그렇게 나왔다.

$ dart ./lib/main.dart
1
2
3

 

그리고 CounterCubit 객체의 increment() 함수에서 emit() 함수를 호출할 때 3항 연산자로 아래와 같은 조건을 만들어 보았다.

• state 값이 9이하이면 증가, 9를 초과하면 9 할당

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  // void increment() => emit(state + 1);
  void increment() => emit(state < 9 ? state + 1 : 9);
}

void main() {
  final cubit = CounterCubit();
  cubit.increment();
  print('${cubit.state}');
  cubit.increment();
  print('${cubit.state}');
  cubit.increment();
  print('${cubit.state}');
}

 

이 코드에선 아래와 같은 결과를 확인할 수 있었다.

$ dart ./lib/main.dart
1
2
3

 

이후 main() 함수에서 cubit.increment()를 좀 더 호출해보았다.

void main() {
  final cubit = CounterCubit();
  cubit.increment();
  print('${cubit.state}'); // 1
  cubit.increment();
  print('${cubit.state}'); // 2
  cubit.increment();
  print('${cubit.state}'); // 3
  cubit.increment();
  print('${cubit.state}'); // 4
  cubit.increment();
  print('${cubit.state}'); // 5
  cubit.increment();
  print('${cubit.state}'); // 6
  cubit.increment();
  print('${cubit.state}'); // 7
  cubit.increment();
  print('${cubit.state}'); // 8
  cubit.increment();
  print('${cubit.state}'); // 9
  cubit.increment();
  print('${cubit.state}'); // 9
  cubit.increment();
  print('${cubit.state}'); // 9
}

 

코드에 예상되는 결과값을 추석문으로 추가하였다. 결과가 예상과 같은지 아닌지 실행하여 확인하였다.

% dart ./lib/main.dart
1
2
3
4
5
6
7
8
9
9
9

 

예상한 결과와 동일하게 나왔다.