Bloc

Date: 2024.08.07 Updated: 2024.08.07

카테고리: Package

태그: Bloc flutter package widget Bloc

BLoC (Business Logic Component)는 Flutter 애플리케이션에서 상태 관리를 위한 아키텍처 패턴으로, 비즈니스 로직을 UI와 분리하여 코드의 재사용성과 테스트 용이성을 높이는 데 중점을 둡니다. BLoC 패턴은 Reactive Programming을 기반으로 하며, 스트림(Stream)을 사용하여 데이터의 흐름을 관리합니다. 아래에서 BLoC의 주요 개념, 사용 방법, 장단점에 대해 자세히 설명하겠습니다.

1. BLoC의 기본 개념

BLoC: 비즈니스 로직을 처리하는 컴포넌트로, 입력(이벤트)을 받고 출력(상태)을 반환합니다. UI는 BLoC에 이벤트를 보내고, BLoC는 상태를 업데이트하여 UI에 반영합니다.
Stream: BLoC는 Dart의 Stream을 사용하여 비동기적으로 데이터를 처리합니다. UI는 Stream을 구독하여 상태 변화를 감지합니다.
Event: BLoC에 전달되는 입력으로, 사용자의 행동이나 외부 이벤트를 나타냅니다.
State: BLoC의 출력으로, UI에 표시할 데이터의 상태를 나타냅니다.

2. BLoC 패턴의 구조

BLoC 패턴은 일반적으로 다음과 같은 구조로 구성됩니다:

UI Layer: 사용자 인터페이스를 구성하는 부분으로, BLoC에 이벤트를 전달하고 상태를 구독합니다.
BLoC Layer: 비즈니스 로직을 처리하는 부분으로, 이벤트를 받고 상태를 반환합니다.
Data Layer: 데이터 소스(예: API, 데이터베이스)와의 상호작용을 처리하는 부분입니다.

3. BLoC의 사용 방법

1. BLoC 클래스 정의하기

BLoC 클래스를 정의하여 이벤트를 처리하고 상태를 관리합니다.

import 'dart:async';

class CounterBloc {
  int _count = 0;

  // 상태를 나타내는 StreamController
  final _countController = StreamController<int>();

  // 상태를 외부에 노출하는 Stream
  Stream<int> get countStream => _countController.stream;

  // 이벤트를 처리하는 메서드
  void increment() {
    _count++;
    _countController.sink.add(_count); // 새로운 상태를 Stream에 추가
  }

  void dispose() {
    _countController.close(); // StreamController를 닫아줍니다.
  }
}

2. UI에서 BLoC 사용하기

UI에서 BLoC를 사용하여 상태를 구독하고 이벤트를 발생시킵니다.

import 'package:flutter/material.dart';

class CounterScreen extends StatelessWidget {
  final CounterBloc bloc = CounterBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BLoC Counter')),
      body: Center(
        child: StreamBuilder<int>(
          stream: bloc.countStream,
          initialData: 0,
          builder: (context, snapshot) {
            return Text('Count: ${snapshot.data}');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: bloc.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

3. BLoC의 Lifecycle 관리

BLoC의 생명주기를 관리하기 위해 dispose 메서드를 호출하여 리소스를 정리합니다. 일반적으로 StatefulWidget의 dispose 메서드에서 호출합니다.

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  final CounterBloc bloc = CounterBloc();

  @override
  void dispose() {
    bloc.dispose(); // BLoC 리소스 정리
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // UI 코드...
  }
}

4. BLoC의 장점

비즈니스 로직 분리: UI와 비즈니스 로직을 분리하여 코드의 가독성과 유지보수성을 높입니다.
테스트 용이성: BLoC는 비즈니스 로직을 독립적으로 테스트할 수 있어, 유닛 테스트가 용이합니다.
Reactive Programming: Stream을 사용하여 비동기적으로 상태를 관리하므로, 데이터의 흐름을 쉽게 처리할 수 있습니다.
재사용성: BLoC을 여러 UI에서 재사용할 수 있어, 코드 중복을 줄일 수 있습니다.

5. BLoC의 단점

복잡성: BLoC 패턴은 초기 설정이 복잡할 수 있으며, 작은 애플리케이션에서는 과도한 구조일 수 있습니다.
학습 곡선: Reactive Programming과 Stream에 대한 이해가 필요하므로, 학습 곡선이 있을 수 있습니다.
상태 관리의 오버헤드: 상태가 자주 변경되는 경우, Stream의 오버헤드가 발생할 수 있습니다.

6. 결론

BLoC 패턴은 Flutter 애플리케이션에서 비즈니스 로직을 효과적으로 관리할 수 있는 강력한 도구입니다. UI와 비즈니스 로직을 분리하여 코드의 재사용성과 테스트 용이성을 높이며, Reactive Programming을 통해 비동기적으로 상태를 관리할 수 있습니다. BLoC 패턴을 통해 복잡한 애플리케이션에서도 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

HERKSS GITHUB BLOG