Bloc 패턴이 무엇이고, 왜 사용하는 것일까?

안녕하세요 개발하는 남자 개남입니다. 

플러터 포스팅의 가장 첫 번째로 Bloc 패턴을 다루게 되었네요.

앞으로 플러터를 공부 및 정리를 하면서 포스팅을 추가해 나아가도록 할 계획입니다.

---

플러터를 개발하면서 화면 표현에는 정적인 표현과 동적인 표현이 있을 수 있습니다.

정적인 표현은 보통 Stateless Widget을 사용하고 동적인 표현을 위해 Stateful Widget을 사용한다는 것이라고 보통 알고 있습니다. 

 

동적인 표현, 즉 동적인 화면 제어를 위해서는 State (상태)의 변화에 따라 화면을 다시 그리게 됩니다.

보통 StatefulWidget을 사용하면 손쉽게 해당 위젯 내의 상태 값을 setState를 통해 화면을 변경할 수 있습니다.

하지만 이러한 경우는 단순한 위젯 구조일때만 해당되는 부분입니다. 

 

사용자들에게 제공될 앱들은 보통 유틸리티성 앱이 아니고야 보통 서버로부터 데이터를 받아오거나? 여러 이벤트를 통해 화면을 제어하는 복잡한 구조의 위젯 트리로 만들어지게 됩니다. 

 

한 가지 위젯 구조를 예를 들어보겠습니다.

위의 상태는 다음과 같습니다.

1. 붉은 영역의 x값은 Scaffold 위젯에서 제어를 하게 됩니다.

2. x값은 하위에 파란색 영역에서 값을 각 위젯에 (상황에) 맞춰 화면을 그리게 됩니다.

 

이러한 구조라고 했을 때 어떤 패턴이나 provider를 사용하지 않고 구현을 하고자 한다면.

Scaffold에서 x 값을 setState를 통해 하위 모든 widget 들을 업데이트를 진행하게 될 것입니다.

그럼과 동시에 하위에 x 값을 참조하는 widget tree 들에게 x의 값을 넘겨주게 됩니다. 

그렇게 하면 위의 구조에서 표현하고자 하는 기능을 만들 수 있습니다.

하지만 그렇게 되므로인해서 화면 업데이트(build)가 필요 없는 곳 마저 화면을 다시 그리게 되는 현상이 발생합니다.

비록 사용자는 알아 차리지 못할 정도의 빠르게 처리가 될 테지만. 만일 각 위젯들이 무거운 로직을 담고 있거나 한다면 

전반적으로 앱이 느려지는 현상도 발생할 가능 성이 있습니다. 

또한 x 값을 하위의 하위 위젯들에게 값을 전달하면서 발생할 수 있는 스파게티 성 코드가 작성될 우려도 있습니다.

위의 경우는 단순한 값인 x를 예를 들었지만 만일 이것이 서버로 부터 데이터를 받아 처리하게 된다면? 

더욱더 복잡해지고 비즈니스 로직과 UI의 콜라보레이션이 ... (유지보수의 힘들어지는 상황.. 을 겪게 될 수도... )

 

아무튼 이러한 현상을 깔끔하게 처리하고 비즈니스 로직과 UI 를 분리하여 관리할 수 있도록 해주기 위한 방법으로 

Bloc 패턴을 구글개발자가 만들어 냈습니다. 

 

사전적인 의미로 Bloc 이란 무엇일까요?

말 그대로 비즈니스 로직을 분리한 Component라고 할 수 있습니다. 

즉 화면 UI 부분은 데이터에 접근해서 가공하는 Logic을 Bloc에서 해줌으로써 깔끔하게 코드를 작성할 수 있도록 설계되었습니다. 그뿐 아니라 화면에 변화가 필요하지 않은 부분은 변화되지 않고 딱 필요한 부분만 갱신되므로 퍼포먼스 측면에서도 좋은 것을 알 수 있습니다.

기존에 Scaffold 가 소유 하고 있던 x의 값은 Bloc에서 관리되고 Scaffold에서 값 변경 이벤트만 요청하면 Bloc에서 알아서 x값을 이벤트에 맞게 변경 (비즈니스로직)을 수행하고 Bloc에 구독한 Widget들에게만 변경사항을 알려주게 하여 화면이 그려지는 방식입니다.

 

 

이 내용으로만 봐도 Bloc 패턴을 사용하지 않을 이유가 없습니다.

하지만 저도 그렇고 제가 아는 몇몇 분들에게 물어봐도 하나같이 하는 말이 있습니다.

관리 파일이 늘어나며, 또한 진입장벽이 있다는 것입니다.

어떠한 상태를 관리하는 것을 만들기 위해 bloc 만들고 event 만들고 구독시키고 ;; 할 것이 많습니다.

하지만 stateful 사용해서 상태를 바로 setState 해주면 바로 구현이 가능 한데 말이죠.

그래서 등장한 것이 provider 인 것 같습니다. 

 

다음번에는 provider를 정리해 보겠습니다.