Flutter를 사용하면서 상태관리에 대한 공부를 하다 정리해두면 좋을 것 같아 BLoC 패턴에 대해 공부를 하면서 포스팅을 해보기로 하였다.
BLoC 패턴이란?
BLoC(Business Logic Component)은 상태가 변화할때마다 렌더링 되는 Flutter에서 UI와 Business Logic을 분리하여 사용하는 패턴이다.
공식문서에 따르면 Presentation layer와 Business layer를 분리함으로써 아래와 같은 효과를 얻을 수 있다고 작성되있다.
- 빠른 속도(fast)
- 테스트 용이성(easy to test)
- 재사용성(reusable)
이런 BLoC 패턴은 예를 들어 아무때나 애플리케이션 내에서 사용되는 상태에 대해서 알고 싶을 때, 애플리케이션이 적절하게 반응하고 있는지 쉽게 테스트를 해보고 싶을 때 등 사용할 수 있다. BLoC은 Simple, Powerful 그리고 Testable, 이 3가지의 핵심 가치를 중심으로 개발되었다고 한다.
Flutter에 BLoC을 사용할 수 있도록 많은 패키지가 있다. 대표적으로는 package:bloc과 package:flutter_bloc 등이 있는데 첫번째 패키지에 대한 이해가 있어야 나머지 패키지를 수월하게 사용할 수 있다.
Core concepts
Streams
bloc 라이브러리를 사용하기에 앞서 Streams에 대한 이해가 필요하다.
Stream에 대한 Flutter 공식문서 👉
Flutter에서 비동기 작업을 처리할 때 보통 Stream과 Future를 사용하게 되는데 이 두개를 사용해보면서 느낀 점을 정리해보았다.
Stream vs. Future
- Stream : 비동기적인 데이터의 sequence(== Iterable한 비동기적 데이터)
- Stream은 요청한 작업의 다음 event를 가져오는 것이 아니라, 준비가 되면 준비가 된 event가 있다고 알려준다.
- Iterable하기 때문에 한 번에 여러 Future를 전달해준다.
Stream를 사용하기 위해서는 함수body를async*로 감싸준다.- 데이터 처리방법
await for:for loop와 함께 사용되는 것을 말한다.listen
- Stream 종류
- Single Subscription (1:1) : 순차적으로 잃어버리지 않고 전송되어야한다. 예를 들어서 File, API관련 event가 발생하면 chunk로 제공된다.
- Broadcast (1:N) : 한 번에 하나 독립적인 처리가 이루어진다. 언제든지
listen가능하며listen하는 동안 발생(fired) 가능하다.
- 비동기 작업 반환(return type)
async*: 요청이 있을 때까지는 연산하는 걸 미루고 필요할 때 처리한다. (== lazily, 게으르게)yield:return과 유사하다.yield는 함수를 종료시키지 않는다. 열린 채로 있어서 필요할 때 다른 연산이 가능하다.yield*:Iterable또는Stream함수를 재귀적으로 호출할 때 사용한다.
- Future : 비동기 작업의 결과, (시간이)오래 걸릴 수 있다.
- Future를 사용하기 위해서는 함수
body를async로 감싸고 Future 결과가 모두 올때까지 기다리게 하는await를 작성해준다. await를 통한 결과는 바로 사용가능하며,await가 없다면<Instance of Future>가 반환된다.- Error handling은
try-catch를 보편적으로 사용한다.
- Future를 사용하기 위해서는 함수
Cubit
(추가될 예정)Bloc
이 글을 임시 글로 넣어둔 지 2개월이 지난 지금, 작은 스타트업에서 BLoC 패턴을 적용하여 서비스를 해볼 수 있었다. 기획부터 구현까지 해보았는데 BLoC을 사용하다 보니 MVVM 모델과 굉장히 유사하다고 느껴졌고 검색을 해보니 약간의 차이는 있지만 거의 비슷한 패턴으로써 사용되고 있다고 한다.
Aaron Chu's blog 👉
stack overflow 👉
MVVM은 데이터바인딩(data binding)을 오직 View-View Model끼리 하지만 BLoC은 어떤 이벤트에서 발생해도 신경쓰지 않는 다는 점이다.
아직도 Provider 하나로 모든 상태관리를 하고 있다면 소규모 프로젝트에서는 문제가 되지 않지만, 조금만 프로젝트의 크기가 커진다면 이에 맞는 상태관리를 어떻게 효율적으로 하는 것이 좋을까 고민하고 있다면 BLoC을 적용해보는 것도 좋은 선택이 될 것 같다.
2개월 동안 사용해보면서 느낀 점은 model마다 bloc을 만들어서 관리해야한다는 점이 코드량이 많아질 수 있으나 유지보수할 때 용이하다는 점이다. 사용되는 기능을 model + bloc + repository 이렇게 총 3개의 부분으로 관리를 해 상태에 맞는 UI를 지속적으로 사용자에게 보여줄 수 있었다. setState(() {})로 화면을 계속 re-rendering 하는 것은 별로 추천드리고 싶지 않다.
