Flutter의 Bloc 패턴 사용법

Flutter에서 Bloc 패턴은 상태 관리와 비즈니스 로직을 분리하여 애플리케이션의 유지 보수성과 확장성을 향상시키는 데 도움이 되는 디자인 패턴입니다. Bloc은 "Business Logic Component"의 약자로, 애플리케이션의 비즈니스 로직을 간단하고 일관되게 관리할 수 있도록 도와줍니다. 이번 글에서는 Flutter에서 Bloc 패턴을 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Bloc 패턴의 기본 개념

Bloc 패턴은 이벤트 기반의 상태 관리 패턴으로, 이벤트가 발생하면 Bloc이 이를 처리하고 새로운 상태를 출력합니다. Bloc 패턴은 크게 세 가지 구성 요소로 나뉩니다:

• Event: 사용자 액션이나 데이터 변경과 같은 이벤트를 나타냅니다.
• State: Bloc이 출력하는 새로운 상태를 나타냅니다.
• Bloc: 이벤트를 처리하고 새로운 상태를 출력하는 비즈니스 로직 컴포넌트입니다.

2. Bloc 패키지 설치

먼저, flutter_bloc 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Counter 예제 구현

이제 Bloc 패턴을 사용하여 간단한 카운터 애플리케이션을 구현해보겠습니다.

 

Step 1: Event 정의

이벤트는 사용자의 액션을 나타내며, 이벤트 클래스는 Equatable을 상속받아 비교할 수 있어야 합니다.

 

import 'package:equatable/equatable.dart';

abstract class CounterEvent extends Equatable {
  const CounterEvent();
}

class Increment extends CounterEvent {
  @override
  List<Object> get props => [];
}

class Decrement extends CounterEvent {
  @override
  List<Object> get props => [];
}

 

Step 2: State 정의

상태는 Bloc의 출력값을 나타내며, 상태 클래스 역시 Equatable을 상속받습니다.

 

import 'package:equatable/equatable.dart';

abstract class CounterState extends Equatable {
  const CounterState();
}

class CounterInitial extends CounterState {
  final int count;

  const CounterInitial(this.count);

  @override
  List<Object> get props => [count];
}

 

Step 3: Bloc 정의

Bloc 클래스는 이벤트를 처리하고 새로운 상태를 출력하는 비즈니스 로직을 포함합니다.

import 'package:flutter_bloc/flutter_bloc.dart';

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

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    final currentState = state;
    if (event is Increment && currentState is CounterInitial) {
      yield CounterInitial(currentState.count + 1);
    } else if (event is Decrement && currentState is CounterInitial) {
      yield CounterInitial(currentState.count - 1);
    }
  }
}

 

반응형

 

Step 4: UI 구현

이제 Bloc을 사용하여 UI를 구현합니다.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(MyApp());
}

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Bloc Counter')),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            if (state is CounterInitial) {
              return Text(
                '${state.count}',
                style: Theme.of(context).textTheme.headline4,
              );
            }
            return CircularProgressIndicator();
          },
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => counterBloc.add(Increment()),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => counterBloc.add(Decrement()),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 BlocProvider와 BlocBuilder를 사용하여 Bloc과 UI를 연결합니다. BlocProvider는 Bloc을 위젯 트리에 공급하고, BlocBuilder는 Bloc의 상태 변화를 구독하여 UI를 업데이트합니다.

4. Bloc 패턴의 장점

• 상태 관리의 일관성: Bloc 패턴을 사용하면 애플리케이션의 상태를 일관성 있게 관리할 수 있습니다.
• 비즈니스 로직 분리: Bloc을 사용하면 비즈니스 로직을 UI 코드와 분리할 수 있어 코드의 가독성과 유지 보수성이 향상됩니다.
• 테스트 용이성: Bloc은 비즈니스 로직을 단위 테스트하기 쉽게 만들어줍니다.

5. Bloc 패턴의 단점

• 초기 설정 복잡성: Bloc 패턴을 처음 설정하는 데는 다소 복잡할 수 있습니다.
• 코드 양 증가: 이벤트, 상태, Bloc 클래스를 정의해야 하므로 코드 양이 증가할 수 있습니다.

결론

Bloc 패턴은 Flutter 애플리케이션에서 상태와 비즈니스 로직을 관리하는 데 매우 강력한 도구입니다. 이벤트 기반의 상태 관리 패턴을 사용하면 상태의 일관성을 유지하고, 비즈니스 로직을 UI 코드와 분리하여 코드의 가독성과 유지 보수성을 높일 수 있습니다. Bloc 패턴을 적절히 활용하여 유지 보수성과 확장성이 뛰어난 애플리케이션을 만들어보세요.