BLoC

BLoC Pattern 이란?

BLoC (Business Logic Component) Pattern 은 Flutter 애플리케이션에서 상태 관리를 위해 사용되는 디자인 패턴

⇒ UI 와 Business Logic 을 분리하여 사용되는 패턴

BLoC Pattern 구조

Event

사용자의 인터렉션이나 시스템 이벤트가 발생하면, 이러한 이벤트는 BLoC 로 전달

⇒ 이벤트는 버튼 클릭, 데이터 로드 요청 등 사용자 인터페이스에서 발생하는 다양한 액션

BLoC

애플리케이션의 비즈니스 로직 담당

⇒ 들어오는 이벤트를 받아 처리하고, 새로운 상태를 생성하여 애플리케이션의 UI 나 다른 BLoC 에 전달

State

BLoC 에 의해 생성되고 UI 에 전달되는 상태

⇒ 상태는 UI 가 사용자에게 보여줄 데이터의 현재 상태

BLoC Pattern 원리

1. 이벤트 발생

사용자 인터페이스에서 특정 액션이 발생하면, 관련된 이벤트가 BLoC 로 전달

2. 비지니스 로직 처리

BLoC 는 전달받은 이벤트를 기반으로 비즈니스 로직을 수행

⇒ 외부 데이터 소스와의 통신, 데이터 가공 등이 이루어 질 수 있다.

3. 상태 생성

BLoC 는 처리 결과를 바탕으로 새로운 상태 생성

⇒ 상태는 애플리케이션 UI 가 사용자에게 보여줄 데이터를 포함

4. 상태 전달

생성된 새로운 상태는 UI 로 전달

⇒ UI 는 이 상태에 따라 화면 갱신

BLoC Pattern 장점

비즈니스 로직과 UI 분리

비즈니스 로직을 UI 로 부터 분리

⇒ 비즈니스 로직이 UI 와 독립적으로 유지되어 코드의 재사용성과 유지보수 용이

테스트 용이성

비즈니스 로직이 UI 와 분리되어 있기 때문에 UI 에 의존하지 않고 독립적으로 테스트 가능

⇒ 애플리케이션의 안정성을 높이는 데 기여

상태 관리의 일관성

모든 상태 변경이 BLoC 를 통해 이루어지도록 함으로써 상태 관리의 일관성 유지

⇒ 애플리케이션의 예측 가능성과 실뢰성을 높이는 데 기여

비동기 처리의 효율성

Stream 을 사용하여 비동기 이벤트와 상태 변화 관리

⇒ 비동기 작업을 효율적으로 처리

BLoC Pattern 단점

학습 곡선

이해하고 사용하기까지 상대적으로 높은 학습 곡선을 가지고 있다.

⇒ Stream 과 비동기 프로그래밍에 익숙하지 않은 개발자에게는 초기 진입 장벽이 될 수 있다.

보일러플레이트 코드

이벤트, 상태, BLoC 클래스 등을 정의해야 하기 때문에 상당량의 보일러플레이트(반복적인) 코드가 발생할 수 있다.

⇒ 프로젝트의 코드량을 증가시키고, 때로는 가독성을 저해할 수 있다.

상태 관리의 복잡성

크고 복잡한 애플리케이션에서 다수의 BLoC 를 관리하고, BLoC 간의 상호작용을 처리하는 것이 복잡해질 수 있다.

⇒ 애플리케이션의 아키텍처를 복잡하게 만들 수 있다.

bloc

bloc 이란?

Dart 언어를 사용하는 어떤 애플리케이션에서든 상태 관리를 위해 사용될 수 있는 상태 관리 라이브러리

⇒ BLoC 패턴을 쉽고 효과적으로 구현할 수 있도록 도와주는 다양한 기능과 유틸리티 제공

bloc 목적

BLoC 패턴을 구현하여 이벤트를 수신하고 이를 기반으로 상태를 변화시키는 로직을 구현할 수 있게 도와줌

⇒ 애플리케이션의 상태 관리를 추상화하고, 비즈니스 로직을 UI 로부터 분리하는 데 도움을 줌

Cubit

이벤트 없이 상태만 관리하는 간단한 형태

⇒ 함수 호출을 통해 상태를 변경

Bloc

이벤트 기반으로 상태를 관리하는 복잡한 형태

⇒ 이벤트를 받아서 상태를 방출

BlocObserver

BLoC 패턴에서 상태 관리 시스템의 생명주기 이벤트를 관찰하고 처리하는 용도

⇒ 디버깅, 로깅, 분석 등에 사용

onCreate

Bloc 또는 Cubit 이 생성될 때 호출

⇒ 초기화 단계에서 발생하는 이벤트를 관찰하는 용도

onEvent

Bloc 에 이벤트가 추가될 때마다 호출

⇒ 초기화 단계에서 발생하는 이벤트를 관찷하는 용도

onChange

Bloc 또는 Cubit 의 상태가 변경될 때 호출

⇒ 상태 변화를 추적하고 분석하는 용도

onTransition

Bloc 에서 상태 전환이 발생할 때 호출

⇒ 상태 변화의 전체 흐름 파악하는 용도

onError

Bloc 또는 Cubit 내부에서 예외가 발생할 때 호출

⇒ 예외 상황을 처리하거나 로깅하는 용도

onClose

Bloc 또는 Cubit 이 닫힐 때 호출

⇒ 리소스 해제 등에 대한 관찰하는 용도

bloc 장점

보일러 플레이트 코드 최소화

이벤트 처리, 상태 변화, 스트림 관리 등을 위한 API 제공

⇒ 개발자가 작성해야 하는 코드의 양을 줄여줌

상태 변화의 추적

상태 변화를 쉽게 추적하고 디버깅 할 수 있도록 도와줌

에러 처리와 리소스 관리

에러 처리와 리소스 해제를 보다 쉽게 관리할 수 있는 패턴과 구조 제공

fluter_bloc

flutter_bloc 이란?

Flutter 애플리케이션에서 BLoC 디자인 패턴을 구현하기 위해 만들어진 Flutter 라이브러리

fluter_bloc 목적

위젯을 제공하여 Flutter UI 구성 요소와 BLoC 패턴 사이의 상호 작용을 용이하게 해줌

⇒ 상태 변화에 따라 UI 를 업데이트하거나, bloc 을 위젯 트리에 추가하고, 상태 변화에 대한 반응을 처리하는 등의 작업을 간소화해줌

BlocBuilder

bloc 의 상태 기반으로 UI 의 일부를 구축하는 데 사용되는 위젯

⇒ StreamBuilder 와 매우 유사하지만, API 가 더 단순하여 필요한 보일러플레이트 코드의 양을 줄임

BlocBuilder<Bloc, State>

BlocBuilder

bloc 의 상태 변화에 반응하여 UI 를 재빌드하는 위젯

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시

builder

bloc 의 상태가 변경될 때마다 호출되며, 주어진 상태에 따라 UI 를 어떻게 나타낼지 정의

⇒ context 는 현재의 BuildContext 를 나타내고, state 는 bloc 의 최신 상탤르 나타냄

bloc

BlocBuilder 에 사용할 Bloc 인스턴스를 전달

⇒ CounterBloc 인스턴스인 bloc 을 사용하여 주어진 bloc 의 상태 변화를 감지하고 반응함

buildWhen

bloc 의 상태 변화가 발생했을 때, UI 를 재빌드할지 결정하는 조건을 정의

⇒ true 를 반환하면 builder 함수가 호출되어 UI 를 재빌드

BlocSelector

bloc 의 상태 기반으로 UI 의 일부를 구축하는 데 사용되는 위젯

⇒ BlocBuilder 와 유사하지만 위젯이 응답할 상태의 특정 부분을 선택하는 기능 추가

BlocSelector<Bloc, State, SelectedState>

BlocSelector

bloc 의 상태 변화에 반응하여 UI 를 재빌드하는 위젯

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시하고, 그 중 String 의 값을 선택하도록 명시함

selector

bloc 의 수신 상태를 builder 함수에서 UI 를 재빌드하는 데 사용할 새로운 값으로 변환하는 곳

⇒ state 는 bloc 의 최신 상태이며 해당 상태 기반으로 새로운 값으로 반환

builder

bloc 의 상태가 변경될 때, selector 에서의 상태가 변경될 때만 호출되며, 변경된 상태에 따라 UI 를 어떻게 나타낼지 정의

⇒ context 는 현재의 BuildContext 를 나타내고, state 는 selector 에서 반환된 값

bloc

BlocSelector 에 사용할 Bloc 인스턴스를 전달

⇒ CounterBloc 인스턴스인 bloc 을 사용하여 주어진 bloc 의 상태 변화를 감지하고 반응함

BlocProvider

위젯 트리에 bloc 을 제공하는 위젯

의존성 주입에 사용되며 위젯 트리 전체에서 bloc 에 쉽게 접근 가능

create

bloc 인스턴스를 생성하여 위젯 트리에 제공

⇒ 트리의 모든 하위 위젯에서 bloc 사용 가능

value

기존 bloc 인스턴스를 가져와 위젯 트리에 제공

⇒ 다양한 위젯 트리에서 bloc 상태를 그대로 유지해야 할 때 유용

dispose

• create : 리소스 자동 해제

• value : 리소스 수동 해제

검색 (read)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 상태가 변경될 때 위젯이 자동으로 다시 작성되지 않음

⇒ 이벤트를 추가하기 위해 bloc 에 접근해야 할 때 일반적으로 사용

검색 (watch)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 상태가 변경될 때 마다 위젯이 재빌드되도록 함

⇒ 상태 변경에 응답하여 위젯이 UI 를 업데이트해야 할 때 유용

검색 (select)

위젯 트리에서 bloc 인스턴스를 검색하는 데 사용되는 메소드

⇒ 모든 상태 변경이 아닌 선택한 상태 부분이 변경될 때만 위젯을 재빌드 함

⇒ 불필요한 위젯 재빌드를 줄여 성능을 향상 시킬 수 있음

MultiBlocProvider

여러 BlocProvider 위젯을 단일 위젯 트리로 병합하는 위젯

여러 bloc 을 하위 트리에 제공하는 프로세스를 간소화하도록 설계된 위젯

⇒ 코드의 가독성 향상과 여러 BlocProvider 의 중첩과 관련된 복잡성과 혼란 제거

BlocListener

상태 변화에 응답하여 리스너를 호출하는 위젯

상태 변화에 대응하여 한 번만 수행되어야 하는 기능에 사용

⇒ 토스트, 스낵바, 다이얼로그 표시 등

BlocListener<Bloc, State>

BlocListener

bloc 의 상태 변화에 반응하여 리스너 함수 사용

⇒ CounterBloc 타입의 Bloc 을 사용하고, Bloc 의 State 타입이 int 임을 명시

listener

상태 변경시 호출되는 콜백

⇒ 변경 사항에 응답하는 코드 입력

listenWhen

리스너 콜백을 호출해야 하는지 여부를 결적하는 선택적 콜백

⇒ 반환 값이 true 이면 리스너가 호출되고 그렇지 않으면 건너 뜀

MultiBlocListener

여러 BlocListener 위젯을 단일 위젯 트리로 병합하는 위젯

여러 bloc 의 상태 변경을 수신해야 할 때 사용

⇒ 코드의 가독성 향상과 여러 BlocListener 의 중첩과 관련된 복잡성과 혼란 제거

BlocConsumer

BlocListener 와 BlocBuilder 의 기능을 하나의 위젯으로 결합한 위젯

RepositoryProvider

위젯 트리에 단일 저장소 인스턴스를 제공하는 데 사용되는 위젯

하위 위젯에서 저장소에 접근하여 API 또는 DB 에서 데이터를 가져오는 등 데이터 작업 수행

검색(read)

위젯 트리에서 저장소를 검색하는 데 사용되는 메소드

MultiRepositoryProvider

여러 RepositoryProvider 위젯을 단일 위젯 트리로 병합하는 위젯

flutter_bloc 장점

구조화와 유지 보수성

애플리케이션의 구조를 명확하게 하고, 코드의 유지 보수성을 향상시켜줌

코드 컨벤션과 문서화

일관된 코드 컨벤션을 제공하고, 문서화가 잘 되어 있어 새로운 개발자들도 쉽게 학습하고 적용할 수 있음

커뮤니티와 지원

널리 사용되는 라이브러리로 활발한 커뮤니티와 다양한 자료를 통해 지원을 받을 수 있음