[flutter] BLoC 라이브러리 클래스 살펴보기

어떻게 사용하는지, 그리고 꼭 알아야 하는 것이 무엇인지 알아보자!

https://bloclibrary.dev/#/flutterbloccoreconcepts}

Bloc State Management Library

위 링크를 타고 가면, Flutter에서 BLoC 패턴을 사용하기 위한 필수! 개념들에 대해서 정리해놓았을 것이다.
개인적으로 BLoC 패턴을 이용해서 개발을 하고자 한다면, 반드시 숙지하고 넘어가길 바란다. (실제로 가장 많이 마주하는 코드들이기도 하다.)

BLoC과 Cubit은 유사하고 둘다 Stream을 기반으로 되어 있다.

따라서 의존성을 주입하는 부분도 비슷할 뿐만 아니라, 서로 비슷하게 쓰이고 있다. 
(사실 나도 명확한 차이?는 모르겠지만, BLoC과 Cubit 중 Cubit이 더 가볍게 쓰이고, BLoC은 각 이벤트 별로 묶어줘야한다 정도로만 알고 있다 ..ㅠㅠ 블럭 잘 안써서 ...모름 ㅠㅠ)

---

- BlocBuilder

새로운 state를 전달 받았을 때, build를 호출하여, widget 변경
(StreamBuilder와 FutureBuilder와 유사)

BlocBuilder<BlocA, BlocAState>(
	builder: (context, state) {
		// return widget here based on BlocA's state
	}
)

condition 옵션을 이용하여 이전 BLoC의 state와 현재 BLoC state를 취하고 bool 반환
condition이 false를 반환하면 builder를 호출하지 않음

BlocBuilder<BlocA, BlocAState>(
	condition: (previousState, state) {
		// return true/false to determine wheter or not
		// to rebuild the widget with state
	},
	builder: (context, state) {
		// return widget here based on BlocA's state
	}
)

 

- BlocProvider

BlocProvider는 child에 Bloc을 제공하는 Flutter widget
BLoC의 단일 인스턴스가 서브 트리 내의 여러 위젯에 제공될 수 있도록 종속성 주입(DI) 위젯으로 사용됨

BlocProvider(
	create: (BuildContext context) => BlocA(),
	child: ChildA(),
);

서브트리에서 BLoC을 참조하여 사용하고자 한다면 다음과 같이 사용

BlocProvider.of<BlocA>(context)

 

- MultiBlocProvider

여러 BlocProvider 위젯을 하나로 병합하는 Flutter widget

MultiBlocProvider(
  providers: [
    BlocProvider<BlocA>(
      create: (BuildContext context) => BlocA(),
    ),
    BlocProvider<BlocB>(
      create: (BuildContext context) => BlocB(),
    ),
    BlocProvider<BlocC>(
      create: (BuildContext context) => BlocC(),
    ),
  ],
  child: ChildA(),
)

 

- BlocListener

BlocListener는 해당 Bloc의 state가 변경 되었을 때 호출되는 위젯

BlocLister<BlocA, BlocAState> (
	condition: (previousState, state) { 
	    // return true/false to determine whether or not
	    // to call listener with state
	 },
	listener: (context, state) {
		// do stuff here based on BlocA's state
	},
	child: Container(),
)

 

- MultiBlocListener

여러 BlocListener 위젯을 하나로 병합하는 flutter widget

MultiBlocListener(
  listeners: [
    BlocListener<BlocA, BlocAState>(
      listener: (context, state) {},
    ),
    BlocListener<BlocB, BlocBState>(
      listener: (context, state) {},
    ),
    BlocListener<BlocC, BlocCState>(
      listener: (context, state) {},
    ),
  ],
  child: ChildA(),
)

 

- MultiRepositoryProvider

RepositoryProvider 위젯을 하나로 병합하는 flutter widget
RepositoryProvider의 경우 플러터에서 앱 단에서 하나로 관리 하고 끌어다 쓰기 때문에 많이 사용하게 될 친구이다!

MultiRepositoryProvider(
  providers: [
    RepositoryProvider<RepositoryA>(
      builder: (context) => RepositoryA(),
    ),
    RepositoryProvider<RepositoryB>(
      builder: (context) => RepositoryB(),
    ),
    RepositoryProvider<RepositoryC>(
      builder: (context) => RepositoryC(),
    ),
  ],
  child: ChildA(),
)

 

Cubit

observable state를 저장하는 클래스
Stream을 기반으로 하지만, 반응형 프로그래밍을 알 필요 없이 super() 를 사용하여 초기 상태를 재정의

• Cubit을 UI에 연결하는 방법
  빌더 사용 (StreamBuilder, FutureBuilder와 유사)
  → 공급자가 위젯 트리에서 직접 cubit 구축 할 수 있음
  
  모든 상태가 변경 될 때 emit() 을 사용하여 업데이트 된 위젯 빌드
  → 상태 변경만 수신하려는 경우 CubitListener 사용
  
  
• Cubit 주입 하는 방법 
  대부분 dependency injection으로 Provider 사용
  → cubit은 제공자 깊이를 기반으로 접근성을 가짐
  
  

e.g. https://github.com/irvine5k/cubit_movies_app/

1. 영화를 나타내는 상태
   → Equatable을 확장하는 MoviesState 클래스 작성
   → Equatable 은 cubit 상태 비교하는데 도움이 되는 패키지로, 내용이 다른 동일한 상태를 구별하는데 유용함
2. cubit 구성
3. 영화를 가져올 함수 작성
4. cubit - ui 연결