[Flutter] flutter_bloc 사용해보기

0. Bloc를 사용하는 이유와 핵심 컨셉

bloc를 사용하는 이유는 무엇일까..?

최근 clean architecture 를 사용다면서 확실하게 presentation과 로직을 분리하고 있는데

bloc을 사용하면  clean architecture에 어울리는 상태관리가 되지 않을까 하는 생가에서 부터 시작됐다.

 

물론 공식문서에 너무 잘 나와 있지만 처음 적용할 때는 꽤나 복잡하고 손이 많이 가고.. 

특히 stream의 개념을 이해하고 구조를 만들어야 하는것이 힘들었다. 

단순하게 가져다 쓰는게 아니라 데이터의 흐름과 ux를 고려한 구조를 내가 직접 만들고 구현해야 한다는 느낌?

 

뭐 지나서 생각해본다면 생각보다 당연한 구현을 문서를 통해서 봤을때 막연히 어렵다고 느꼈던것 같다.

 

우선 bloc에는 cubit과 bloc 가 있는데 공식문서에서는 

cubit는 단순한 로직으로 이벤트 발생 없이 state와 state를 변경하기 위함 함수만 정의해서 사용하면 되고

bloc는 event, state를 만들어서 이벤트 중심적인 점근 방식을 사용한다... 라고 되어 있다.

 

숫자증감 같은 단순 작업은 cubit로 이벤트 중심으로 상태값에 따른 로직이 필요 할때는 bloc를 사용하면 된다고 생각하자.

그래서 bloc가 조금 더 복잡하겠지..?

오늘 포스팅은 bloc에 대해 다루려고 한다.

 

1. Bloc의 동작 순서

임의의 페이지에 임의의 버튼을 누르면 event가 발생하고, 발생한 event를 인지 후 로직을 구현하고, 구현이 완료되면 state을 변경해 준다. 그러면 presentation에서 변화된 state를 인지 하여 UI를 업데이트 한다.

event 발생 -> 로직 구현 -> state 변경 -> UI 업데이트

 

위의 내용이 가장 핵심이라고 생각이된다. 물 흐르듯이 흘러가는 로직과 데이터. stream의 개념도 중요하지..

 

2. bloc 구조

하나의 bloc를 구현하기 위해서 bloc, event, state 의 설정이 필요하다.

bloc

event를 인지하고 state의 상태값을 변경

event

발생한 이벤트에 필요한 함수 및 변수를 정의하고 bloc에 전달

state

로직 진행 후의 상태를 나타내고 presentation에 상태를 알리거나 데이터를 전달 한다.

 

3. 사용예시

bloc

class LoginBloc extends Bloc<CounterEvent, int> {
  LoginBloc() : super() {
    on<Increment>((event, emit) => 
      emit(ComplateState())
	);
  }
}

 

event

class LoginEvent {}

final class LoginReqEvent extends LoginEvent {
	String? id;
    String? pass;

	LoginReqEvent({this.id, this.pass});
}
final class LogoutReqEvent extends LoginEvent {
	LogoutReqEvent();
}

 

state

class LoginState {}

class ComplateState extends LoginState {
	ComplateState();
}

presentation(Login Page)

class LoginMainPage extends Stateless {
.
.
.
.

return BlocBuilder<LoginBloc, LoginState>(
          builder: (context, state) =>
          Column(....
          .
          .
          .
}
// event 발생은 context.read<LoginBloc>().add(LoginEvent());
// state is ComplateState ? ... : ... ;

// 위 형식 처럼 사용하면 된다.. 
// 중요! 앱이 처음 빌드되는 첫 화면에 BlocProvider 또는 MultiProvider를 사용하여
// Bloc를 초기화 해주어야 한다.

 

끝.