BloC

BloC (Business Logic Component)

BloC는 **비즈니스 로직(Business Logic)**을 컴포넌트로 분리하여 Flutter 애플리케이션의 상태를 효율적으로 관리하는 패턴입니다. **이벤트(Event)**와 **상태(State)**라는 두 가지 주요 개념을 사용하여 앱의 동작을 정의하며, 구조화된 상태 관리가 가능합니다.

---

BloC 설치:

$ flutter pub add flutter_bloc

pubspec.yaml에 다음 의존성을 추가합니다:

dependencies:
   flutter_bloc: ^8.1.6

의존성을 가져옵니다:

$ flutter pub get

BloC의 주요 개념

Event (이벤트):
사용자의 행동 또는 앱에서 발생하는 작업을 나타냅니다. 예: 버튼 클릭, 입력 필드 변경 등.

abstract class CounterEvent {}

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

State (상태):
현재 UI가 반영해야 할 데이터 또는 상태를 나타냅니다. 예: 로딩 상태, 데이터 상태, 에러 상태 등.

abstract class CounterState {}

class CounterValue extends CounterState {
  final int value;
  CounterValue(this.value);
}

Bloc:
이벤트를 받아 상태를 생성하는 비즈니스 로직을 담당합니다.

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterValue(0)) {
    on<IncrementEvent>((event, emit) {
      final currentValue = (state as CounterValue).value;
      emit(CounterValue(currentValue + 1));
    });

    on<DecrementEvent>((event, emit) {
      final currentValue = (state as CounterValue).value;
      emit(CounterValue(currentValue - 1));
    });
  }
}

Stream:
BloC은 Stream을 사용하여 이벤트와 상태를 연결합니다. 이벤트를 받으면 새로운 상태를 방출하고 이를 구독(subscribe)한 UI가 업데이트됩니다.

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: Scaffold(
        appBar: AppBar(title: Text('BloC Counter')),
        body: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            final value = (state as CounterValue).value;
            return Center(child: Text('Count: $value'));
          },
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),
              child: Icon(Icons.add),
            ),
            SizedBox(height: 10),
            FloatingActionButton(
              onPressed: () => context.read<CounterBloc>().add(DecrementEvent()),
              child: Icon(Icons.remove),
            ),
          ],
        ),
      ),
    );
  }
}

---

BloC의 장점

• 비즈니스 로직과 UI 분리: 비즈니스 로직과 UI가 완전히 분리되어 유지보수가 용이합니다.
• 재사용성: 동일한 Bloc을 다양한 UI에서 활용할 수 있습니다.
• 테스트 용이성: 상태와 이벤트가 명확하게 정의되어 테스트 작성이 쉽습니다.

---

BloC의 단점

• 진입 장벽: 구조가 복잡하여 초보자에게 어렵게 느껴질 수 있습니다.
• Boilerplate 코드: 상태와 이벤트 정의에 코드가 길어질 수 있습니다.