Bloc State Management Library

bloc | Dart Package

BLoC(Business Logic Component)

BLoC의 아키텍처

BLoC의 코드 단축 과정

BLoC의 장점

• 관심사의 분리
  • 비즈니스 로직과 UI를 분리할 수 있어서 각각 구현할 때 다른 부분을 신경쓰지 않고 구분할 수 있다.
• 코드 재사용성
  • 재사용 가능한 비즈니스 로직 구성요소를 만들 수 있어 유지보수성을 높일 수 있다.
• 예상가능한 상태 관리
  • 유저의 반응에 맞춰 이벤트를 방출하기 때문에 애플리케이션의 행동을 예측하기 쉽다.
• 테스트 용이성
  • UI와 비즈니스 로직을 분리할 수 있기 때문에 UI와 독립적으로 테스트할 수 있다.
• 크고 복잡한 애플리케이션에 최적화
  • 개발 취지부터 크고 복잡한 애플리케이션을 쉽게 관리하고자 만들어진 기법이기 때문에 규모가 커질수록 유용하다.

BLoC의 아키텍처

BLoC은 다음과 같이 3가지 레이어를 가진다.

• Data
  • 하나 이상의 소스로부터 데이터를 검색/수정하는 책임을 가진 레이어다.
  • 데이터 레이어는 애플리케이션에서 가장 낮은 레이어이며 데이터베이스, 네트워크 요청, 비동기 데이터 소스와 상호작용하는 레이어다.
  • 데이터 레이어는 2가지 파트로 나눌 수 있다.
    • Data Provider
      • 로우 데이터를 제공하는 책임을 가진 파트이며, 포괄적이고 다목적이어야 한다(generic and versatile).
    • Repository
      • Bloc 레이어 통신에서 하나 이상의 Data Provider를 감싸는 래퍼 역할을 한다.
• Business Logic
  • 프레젠테이션 레이어로부터의 입력에 대해 새로운 상태로 반응하는 책임을 가진 레이어다.
  • 애플리케이션의 상태를 형성하는데 필요한 데이터를 검색하기 위해 하나 이상의 레포지토리에 의존할 수 있다.
  • Bloc은 stream을 노출하기 때문에 Bloc에서 다른 Bloc으로 listen을 시도하는 유혹에 빠질 수 있지만 이 방식은 두 Bloc 사이에 의존관계를 형성하고 긴밀한 결합(tight-coupling)을 만들어 유지보수를 어렵게 만들기 때문에 어떤 비용을 감수하더라도 피해야 한다. Bloc은 비즈니스 로직 레이어에 상주하기 때문에 어떤 Bloc도 다른 Bloc에 대해 알아서는 안된다.

    • 하나의 Bloc은 오직 이벤트와 주입된 리포지토리(생성자를 통해 Bloc에게 주어진 리포지토리)를 통해서만 정보를 수신해야 한다.

    • 그럼에도 불구하고 Bloc에서 다른 Bloc으로 반응해야하는 필요가 있다면, 두가지 옵션이 있다.

      • 해당 문제를 프레젠테이션 레이어로 올린다.

        • 하단 코드는 SecondBloc이 FirstBloc에 대한 정보를 알아야하는 상황을 방지해주고 느슨한 결합을 조성한다.
        • 만약 프레젠테이션 레이어에서 두 Bloc에 대해 어떠한 결합도 없게 하고 싶다면, 두 Bloc을 같은 데이터소스를 공유하게 한 다음 데이터가 변경될 때 각각 업데이트를 해주면 된다.

        class MyWidget extends StatelessWidget {
          const MyWidget({Key? key}) : super(key: key);
        
          @override
          Widget build(BuildContext context) {
            return BlocListener<WeatherCubit, WeatherState>(
              listener: (context, state) {
                // When the first bloc's state changes, this will be called.
                //
                // Now we can add an event to the second bloc without it having to know about the first bloc.
                BlocProvider.of<SecondBloc>(context).add(SecondBlocEvent());
              },
              child: TextButton(
                child: const Text('Hello'),
                onPressed: () {
                  BlocProvider.of<FirstBloc>(context).add(FirstBlocEvent());
                },
              ),
            );
          }
        }
        

      • 해당 문제를 도메인 레이어로 내린다.

        • 두 Bloc은 하나의 리포지토리로부터 데이터를 수신하고 리포지토리의 데이터가 변경될 때 독립적으로 그들의 상태를 업데이트할 수 있다. 반응형 리포지토리를 이용하여 상태 동기화를 유지하는 것은 대규모 엔터프라이즈 애플리케이션에서 흔히 볼 수 있다.

        class AppIdeasRepository {
          int _currentAppIdea = 0;
          final List<String> _ideas = [
            "Future prediction app that rewards you if you predict the next day's news",
            'Dating app for fish that lets your aquarium occupants find true love',
            'Social media app that pays you when your data is sold',
            'JavaScript framework gambling app that lets you bet on the next big thing',
            'Solitaire app that freezes before you can win',
          ];
        
          Stream<String> productIdeas() async* {
            while (true) {
              yield _ideas[_currentAppIdea++ % _ideas.length];
              await Future<void>.delayed(const Duration(minutes: 1));
            }
          }
        }
        
        class AppIdeaRankingBloc
            extends Bloc<AppIdeaRankingEvent, AppIdeaRankingState> {
          AppIdeaRankingBloc({required AppIdeasRepository appIdeasRepo})
              : _appIdeasRepo = appIdeasRepo,
                super(AppIdeaInitialRankingState()) {
            on<AppIdeaStartRankingEvent>((event, emit) async {
              // When we are told to start ranking app ideas, we will listen to the stream of app ideas and emit a state for each one.
              await emit.forEach(
                _appIdeasRepo.productIdeas(),
                onData: (String idea) => AppIdeaRankingIdeaState(idea: idea),
              );
            });
          }
        
          final AppIdeasRepository _appIdeasRepo;
        }
        

    • 예시 사진