Flutter/Bloc

Bloc (2) - Cubit과 Bloc의 개념

smileDeveloper 2024. 1. 23. 01:44
반응형
SMALL

Bloc을 이해하기 위해 Stream의 작동방식을 아는 것이 중요합니다.

간단한 비유를 들자면 물이 흐르는 파이프는 Stream이고 파이프 안에 흐르는 물은 비동기 데이터라고 말할 수 있을 것 같습니다.

순차적으로 값이 들어오는 일종의 For문 같은 느낌입니다. 아래 간단한 코드를 보겠습니다.

Stream<int> countStream(int max) async* {
    for (int i = 0; i < max; i++) {
        yield i;
    }
}
Future<int> sumStream(Stream<int> stream) async {
    int sum = 0;
    await for (int value in stream) {
        sum += value;
    }
    return sum;
}
void main() async {
    /// Initialize a stream of integers 0-9
    Stream<int> stream = countStream(10);
    /// Compute the sum of the stream of integers
    int sum = await sumStream(stream);
    /// Print the sum
    print(sum); // 45
}

- countStream 함수로 Stream을 생성합니다.

- Stream을 통한 비동기 데이터 값을 처리합니다.

 

여기서의 Stream의 데이터가 단순히 For문으로 처리되었지만 실제로 API 통신이나 Socket을 보시면 처리되어 가져오는 값은 비동기 데이터임을 아실 수 있을 것 입니다. 또 ChatGPT의 채팅의 답변이 순차적으로 적히는 것을 보시면 Stream으로 작동함을 알 수 있습니다.

 

이제 본론인 Cubit과 Bloc의 개념부터 알아보겠습니다. 

 

먼저 Cubit입니다.

Cubit은 간단히 말하면 함수를 통해  상태가 변환되는 개념입니다. Cubit의 상태 값이 위젯에 쓰일 경우 상태 값이 바뀔 때마다 위젯은 다시 그려지게 됩니다. 상태 값은 emit이란 키워드를 통해 Cubit 내부에서만 값의 상태를 바꿀 수 있습니다.

 

다음은 Bloc입니다.

Bloc도 간단히 말하자면 Cubit과는 다르게 이벤트를 통해 상태가 변환되는 개념입니다. Bloc과 Cubit의 부모 클래스는 BlocBase로 같습니다. Bloc은 Cubit에 함수 대신 이벤트로 상태를 바꾼다는 점이 추가된 개념입니다. 이벤트라는 것은 버튼을 누름, 페이지 로드, 수명 주기 이벤트와 같은 사용자 상호 작용을 의미합니다. 

 

다음 포스팅엔 코드와 같이 보면서 설명해보겠습니다. 이 포스팅으로 배워가야 할 것은

- Stream의 개념

- Cubit은 함수를 통해 상태가 변환된다는 점

- Bloc은 이벤트를 통해 상태가 변환된다는 점

이 3가지 입니다. 

 

 

반응형
LIST

'Flutter > Bloc' 카테고리의 다른 글

Bloc (3) - Cubit과 Bloc 코드로 이해하기  (0) 2024.01.31
Bloc (1) - Bloc 이란  (0) 2024.01.21
Bloc (0) - Bloc 배워보기  (1) 2024.01.09