Bloc

하요·2024년 7월 9일

Flutter State Management

목록 보기

7/7

Flutter에서 이벤트 기반 상태 관리 및 비즈니스 로직 분리하기: Bloc

Bloc(Business Logic Component)은 Flutter 애플리케이션에서 상태 관리를 단순화하고, 비즈니스 로직을 UI와 분리하여 유지보수성을 높이는 데 사용되는 디자인 패턴이자 라이브러리입니다. 이를 통해 상태의 예측 가능성과 테스트 가능성을 높일 수 있습니다.

주요 개념

Bloc: 이벤트를 받아서 상태로 변환하는 역할을 합니다. Bloc 클래스는 이벤트를 처리하고 새로운 상태를 방출합니다.
Event: Bloc에서 처리해야 할 동작이나 변화입니다. 이벤트는 사용자 입력, 네트워크 요청 등으로 발생합니다.
State: Bloc이 처리한 이벤트에 따라 변화하는 상태입니다. UI는 이 상태를 기반으로 업데이트됩니다.
BlocProvider: Bloc 인스턴스를 위젯 트리 내에서 제공하는 역할을 합니다.
BlocBuilder: Bloc의 상태 변화를 구독하고, 새로운 상태에 따라 UI를 빌드하는 위젯입니다.

코드 예제

CounterBloc 구현

counter_event.dart

abstract class CounterEvent {}

class Increment extends CounterEvent {}

class Decrement extends CounterEvent {}

counter_state.dart

class CounterState {
  final int counterValue;
  CounterState(this.counterValue);
}

counter_bloc.dart

import 'package:bloc/bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState(0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is Increment) {
      yield CounterState(state.counterValue + 1);
    } else if (event is Decrement) {
      yield CounterState(state.counterValue - 1);
    }
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter_bloc.dart';
import 'counter_event.dart';
import 'counter_state.dart';

void main() => runApp(CounterApp());

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterBloc, CounterState>(
        builder: (context, state) {
          return Center(
            child: Text(
              '${state.counterValue}',
              style: TextStyle(fontSize: 24),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => context.read<CounterBloc>().add(Increment()),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => context.read<CounterBloc>().add(Decrement()),
          ),
        ],
      ),
    );
  }
}

Bloc의 특징과 단점

Bloc 패턴은 다음과 같은 특징과 단점을 가지고 있습니다:

특징

명확한 구조: 이벤트와 상태의 흐름이 명확하여 코드의 가독성과 유지보수성이 높습니다.
단일 출처의 진실 (Single Source of Truth): 상태가 Bloc 내에서만 관리되므로 상태의 일관성을 유지하기 쉽습니다.
높은 테스트 가능성: 이벤트와 상태의 변환 과정을 단위 테스트로 검증할 수 있습니다.
비즈니스 로직 분리 (Separation of Concerns): 비즈니스 로직을 UI와 분리하여 코드 유지보수와 재사용성을 높입니다.
불변성 (Immutability): 상태를 변경할 수 없도록 만들고, 변경 시 새로운 상태 객체를 생성하여 상태 추적과 디버깅이 용이합니다.

단점

초기 설정의 복잡성: 다른 상태 관리 방법에 비해 초기 설정이 다소 복잡할 수 있습니다.
보일러플레이트 코드: 이벤트, 상태, Bloc 클래스를 정의하는 데 많은 코드를 작성해야 할 수 있습니다.