Search
▪️

Advanced Flutter Architecture - The Bloc Pattern

Business Logic Component : Bloc Pattern은 Provider를 이용하게 되었던 경우와 마찬가지로 Constructor을 통해서 인자를 넘기는 불필요한 경우들을 대비하여 쓰게 된다.
StatefulWidget이 React의 Component State라고 보면 Bloc Pattern은 React의 Redux라고 생각하면 된다.
Bloc의 전반적인 아이디어는 모든 data들과 모든 state들의 저장소로 볼 수 있다.
만일 state가 바뀌면서 어떤 Widget을 업데이트가 필요하면 해당 Widget을 Bloc과 같이 엮는다. 이와 같이 state에 따라 변화가 필요한 Widget들의 모든 state들이 Bloc이라는 하나의 object에 묶이게 된다.
Input data stream from a widget ⇒ BLOC ⇒ Output data stream to a widget
BLOC 내에서는 sink라는 곳에 add하는 module이 있고 (stream을 위해 data를 담아두는 곳), sink에 저장된 data들을 뿌려주는 stream을 이용하는 module이 있다.
해당 stream을 이용하는 module은 logic이 붙어 있는 (validator와 같은) stream을 변환 해주는 stream transformer가 있다. (from handler라는 constructor을 이용하여 transform 실시한다.)
Stream Controller는 Sink에 담긴 Data들을 Stream화 해준다. stream controller는 stream이 사라지는 순간 cancel 되어야 하기 때문에 dispose 함수에 close method를 작성해야 한다.
BLOC같은 경우, 특정 Widget에서 필요로 하는 logic을 구현했을 때 해당 BLOC을 Widget Tree와 무관한 곳에 instance를 생성할지, Widget Tree 내에 instance를 생성할지가 중요하다.
전자의 경우 Global Instance가 되므로 소규모에 유리하며, 후자의 경우 Scoped Instance가 되므로 대규모에 적합하다.
Global Instance의 경우 그냥 BLOC 스크립트 내에서 instance를 생성해준 뒤에 이용하면 좋지만, Scoped Instance의 경우 그렇지 않다. 이용하려는 Depth의 Widget 내에서 instance 생성 시, 해당 Depth에서는 이용 가능하지만 Child Widget들은 해당 BLOC instance를 쓸 수 없는 현상이 발생하기 때문이다. 따라서 Scoped를 주면서, child 들도 BLOC에 접근할 수 있도록 하는 것이 InheritedWiget이다.
후자의 경우, Global과 달리 일정 커버 범위를 갖기 때문에 Widget Tree 내로 들어가야 한다. 따라서 생성한 class는 Widget이 되어야 하고 child를 가져야 한다. BLOC을 구현 했으면, Inherited Widget을 상속 받는 class를 선언하고 그 안에 instance를 생성한다. 이 때 접근은 of method를 이용하여 접근한다.
of method를 구현하면 dependOnInheritedWidgetOfExactType이라는 context의 method를 호출하여 bloc이라는 Instance에 접근하게 되는데, 이는 InheritedWidget의 BLOC instance를 찾기 위한 method임
Instance가 있는 BLOC은 오로지 InheritedWidget 내에만 존재하고 BLOC instance를 갖고 있는 InheritedWidget의 instance 역시 자식 Widget에 존재하지 않기 때문에, BLOC Instance를 찾는 of method는 static이 되어야 하고 InheritedWidget이 갖고 있는 BLOC을 찾아야 쓸 수 있기 때문에 dependOnInheritedWidgetOfExactType을 사용함
둘 이상의 비동기 stream을 합쳐 처리 해야할 때
1.
dart:async
2.
custom solution
3.
RxDart