본문 바로가기
디자인패턴

BlOC 패턴이란?

by 검은도자기 2021. 9. 11.

 

정의

  • Flutter의 상태 관리를 제어하기 위해 Google 개발자가 만든 디자인 패턴

 

목적

  • 화면 UI 부분은 데이터에 접근해서 가공하는 Logic을 Bloc에서 해줌으로써 깔끔하게 코드를 작성할 수 있도록 설계
  • 블록 패턴이 독립적으로 플랫폼의 매우 동일한 코드를 재사용할 수 있도록 고안
  • 다른 플랫폼용 앱을 개발하면서 개발자 측의 작업 부하를 완화하는 것을 목표로 개발

 

구조

  • model : model은 Data Provider나 Respository를 통해 Data를 처리하는 부분
  • ui : ui는 user interface를 의미하는 것으로 사람에게 보이고 입력을 받는 역할을 하는 부분을 구성하는 코드들이 저장될 것입니다. Flutter의 경우 Widget들을 작성하게 됩니다.
  • bloc : Business Logic Component의 약자로 이름을 비추어 보아 model과 ui 사이에서 중재자 역할을 함을 알 수 있고 관련된 Code를 작성합니다.

 

특징

  • 안드로이드에서의 MVVM 패턴(Model - View - ViewModel)과 거의 동일하며 ViewModel 대신 BloC이 들어가는 구조이다.
  • UI에서는 여러 BLOC가 존재할 수 있다.
  • UI에서는 화면에 집중하고 BLOC에서는 비즈니스 로직에 집중한다. ⇒ 즉, 이벤트 처리는 BLOC에서 전부 한다.
  • UI에서는 BLOC의 내부 구현을 몰라도 된다.
  • BLOC는 여러 UI에서 구독이 가능하다.
  • BLOC만 분리해서 테스트가 가능하도록 해야 한다.

 

장점

  • 화면에 변화가 필요하지 않은 부분은 변화되지 않고 딱 필요한 부분만 갱신되므로 퍼포먼스 측면에서도 좋음

 

단점

  • 관리 파일이 늘어나며, 학습 진입장벽이 있다는 것
  • 처음 설계 시 고려해야 할 점이 많기 때문에 개발 및 디버깅 시간 증가

 

마무리

플러터에 주로 사용되는 디자인 패턴인 BLOC 패턴에 대해서 공부한 내용을 정리해봤습니다.

코드 설계 목적으로 보긴 했지만, 다른 여러 디자인 패턴 중 왜 구글 개발자가 이 디자인 패턴을 추천했을까?

궁금했었는데, 검색이 잘 안돼서 못 찾고 마무리를 하네요. 추후에 시간이 여유가 되면 찾아봐야겠다고 생각 듭니다.

아직 부족하거나 틀린 부분이 있을 수도 있으니 주의하시면 좋을 거 같습니다.

이번 포스팅은 마무리하면서 다음 포스팅에서 뵙겠습니다.

 

 

'디자인패턴' 카테고리의 다른 글

아토믹 디자인 패턴(atomic design)  (0) 2022.01.03