Flutter) BLoC 이해

1. BLoC의 개요

• UI와 Business Logic을 분리하여 만드는 방식을 의미한다.
• Flutter의 state를 관리하는 디자인 패턴중 하나이다.
• 이를 통하여 UI와 state코드를 분리 시킬수있다.

- State 관리란?

• 사용자의 행동에 따라 바뀌게 되는 데이터들을 의미한다
• 기존의 SetState를 사용하게 되면 한 페이지에서 사용하던 데이터를 다른페이지에서 사용할때 코드가 꼬여 버릴 가능성이 커지게 된다.

- BLoC의 장점

• UI코드 쪽에서는 UI만 건들면 되고, BLoC쪽에서 대부분의 Logic을 생각할수가 있다.
• 협업시 다른사람이 만들어 놓은 BLoC을 새로이 만들필요 없이 재사용이 가능하다.
• setState()를 사용하는 것 보다 코드를 더 단순하게 만들수가 있다.

- BLoC속 주요 개념

1.Events

• Event란 Bloc의 input이다.
• 사람의 뇌가 일하기 위해서는 특정한 input이 있어야 일을 한다. 이처럼 Bloc에서 특정한 input을 알리는 역할을 Event가 하는 것이다.
• flutter에서는 다음과 같이 주로 선언을 하게 된다.

class IncrementBtnPressed extends CouterEvent {
  @override
  String toString() {
    return 'IncrementBtnPressed';
  }
}
class DecrementBtnPressed extends CouterEvent {
  @override
  String toString() {
    return 'DecrementBtnPressed';
  }
}

2.States

• Bloc에서의 연산의 결과이다.
• 사람의 뇌가 특정한 input에 대해 처리한 결과를 의미한다.
• 항상 초기 State값이 설정이 되어 있어야 한다.

3.Transitions

• State의 변화를 의미한다.
• 트랜지션은 current state, the event, next state로 이루어져 있다.

4.Stream

• Bloc을 사용할때 Stream이 어떻게 작동을하는지 아는것이 중요하다.
• Stream은 비동기 data들의 연속이다.
• Stream은 물이 흐르는 파이프라고 생각을 하면된다. 그리고 그곳에 흐르는 데이터들이 비동기 data라 생각하면 된다.
• Stream은 Future와 비슷하게 생각을 할수 있다. 하지만 future와 달리 여러개의 데이터를 yield를 통해 동시에 반환을 시켜 줄수가 있다. => 그렇기 때문에 흐르는 물처럼 데이터들이 흘러나올수가 있다.

5.Bloc

• 들어오는 event Stream을 나가는 state stream으로 바꿔주는 역할을 하게 된다.
• mapEventToState 함수가 꼭 존재해야한다.
• => 이것이 들어오는 event를 state로 바꾸어 주는 역할을 하는 것이다.
• 아래와 같은 형식처럼 코드가 만들어 질것이다.

Stream<CounterState> _mapIncrementBtnPressedToState() async* {
    yield state.update(countNum: state.counting+1);
}

Stream<CounterState> _mapDecrementBtnPressedToState() async* {
    yield state.update(countNum: state.counting-1);
}

다음은 flutter의 기본 counter 앱을 Bloc으로!