반응형

BLoC Pattern이란

BLoC Pattern 이란 Bussiness Logic Component 의 줄임말이다.
BLoC Pattern 은 Flutter 의 상태 관리를 제어하기위해서 Google 개발자에 의해서 디자인 되었다.


Flutter 에서는 상태에 따라서 렌더링이 일어나기 때문에, 상태 관리가 매우 중요하다.


BLoC 은 UI 와 Bussiness Logic 을 분리하여, 각각 코드의 의존성을 낮추게한다.
Flutter 을 위해 설계 되었지만, 디자인 패턴이기 때문에, 어떠한 프레임워크나 언어에서도 사용이 가능하다.

 

즉 BLoC는 비즈니스 로직을 네트워크나 저장소에서 분리하고 UI 화면 사이에서 이벤트 및 데이터를 수신하고 전달하는 비즈니스 로직 패턴이다.

 

UI는 UI를 나타내는 코드만 있어야한다. 유효성 검사, 데이터 조작과 같은 어떤 논리적인 처리는 BLOC에서 처리되어야 한다는 것을 의미한다.

 

각각의 역할을 나누어 맡은 역할만 할 수 있게 만드는 아키텍쳐 설계 패턴이라고 할 수 있다.

 

 

 

 

 

실제로  앱에서 어떻게 적용 할 수 있을지 생각해보자.

 

BLoC은 아래와같이 비즈니스 로직을 처리하는 역할만을 담당하고 View는 BloC을 구독하여 데이터의 state를 받아와 그려주는 역할만 하면 된다.

 

이렇게 아키텍쳐 디자인을 하게 되면 BLoC에서는 온전히 로직에 대해서만 행동을 할 수 있게 되고, 그로인해 unit test도 한결 쉬워지며 View에서는 BLoC이 어떻게 구현되어있는지 알 필요 없이 State에 대해 UI만 구성을 해주면 된다는 것이다. (물론 UI unit test만 하면되니 훨씬 더 편해지게 될 것이다.)

 

 

 

아래 그림을 보면 실제로 UI는 action(button click)을 하게 되면 BLoC에서 Network(서버)와 통신하게되고 서버에서 받아온 데이터를 계산하여 state를 던져주면 UI에서는 해당 state를 그대로 표현만 하면 된다.  

 

 

아래 그림은 실제 BLoC 패턴을 어떻게 사용할지 생각해보기 좋은 그림이다.

 

RxAndroid와 Room을 이용하여 어떻게 BLoC 패턴을 구현하는지 아래 그림에 비추어 설명해보고자 한다.

 

UI에서 BLoC를 구독하고, BLoC는 서버에서 데이터를 수신하여 돌아오는 Response를 로직에 맞게 처리하여 Room에 fetch한다.

 

그리고 Fecth됨과 동시에 UI는 BLoC을 구독하고 있기에 state가 바뀜을 알게되고 이에 맞게 UI를 그려주게 된다.

 

Room DB를 사용하면 추후 오프라인 상태가 되어도 local에서 사용가능하기에(물론 로컬 메모리를 많이 사용하는 앱이 되겠지만) 좋은 방법중 하나가 된다.  ( + 서버에서 데이터를 받아오기전  Room이 캐싱의 역할도 하게 되어 빠른 데이터 표현이 가능해진다.)

 

 

BLoC 의 특징

- UI 에서는 여러 BLoC 이 존재할 수 있다.
- UI 에서는 화면에 집중하고, BLoC 에서는 Logic 에 집중한다.
- UI 에서는 BLoC 의 내부 구현에 대해서 몰라도 된다.
- BLoC 은 여러 UI 에서 구독 할 수 있다. 때문에 재사용이 용의하다.
- BLoC 만을 분리해서 테스트가 가능하다.

 

 

 

https://pks2974.medium.com/bloc-%EC%9D%B4%ED%95%B4-%ED%95%98%EA%B8%B0-%EB%B0%8F-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-%ED%95%98%EA%B8%B0-7dc705e4c640

 

https://centbin-dev.tistory.com/34

반응형

'Applied > Design Pattern' 카테고리의 다른 글

빌더 패턴(Builder Pattern)  (0) 2020.01.16
뷰홀더 패턴(View Holder Pattern)  (2) 2019.09.02
MVC 패턴(Model View Controller Pattern)  (0) 2019.07.20
상태 패턴(State Pattern)  (0) 2019.07.18
브릿지 패턴(Bridge Pattern)  (0) 2019.07.15