Flutter BLoC 패턴 완벽 이해하기 🚀
Flutter 앱을 개발하다 보면, “상태관리(State Management)”가 중요한 화두로 등장합니다. 그중에서도 BLoC (Business Logic Component) 패턴은 가장 널리 사용되는 구조로, UI와 비즈니스 로직을 명확히 분리할 수 있게 해주는 강력한 방법입니다.
🔹 BLoC 패턴이란?
BLoC 패턴은 Business Logic Component의 약자로, 사용자의 입력(Event)을 받아서 내부 로직을 처리하고, 그 결과를 State로 UI에 전달하는 아키텍처입니다. 즉, UI는 데이터의 변화를 감시만 하고, 비즈니스 로직은 Bloc이 담당하는 구조입니다.
🧩 BLoC 패턴의 핵심 구성 요소
1. Event
사용자가 발생시키는 액션입니다. 예를 들어 버튼 클릭, 스크롤, 입력 등이 이벤트로 전달됩니다.
abstract class CounterEvent {}
class Increment extends CounterEvent {}
2. State
현재 앱의 상태를 나타냅니다. State는 Bloc이 변경하며, UI는 이를 감시합니다.
class CounterState {
final int count;
CounterState(this.count);
}
3. Bloc
Event를 받아서 State를 변경하는 중간 관리자입니다.
Bloc은 모든 로직을 관리하고, 새로운 상태를 emit()으로 내보냅니다.
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(0)) {
on<Increment>((event, emit) {
emit(CounterState(state.count + 1));
});
}
}
4. UI (Widget)
UI는 Bloc을 구독하고, 상태 변화에 따라 화면을 갱신합니다.
BlocBuilder를 사용하여 쉽게 구현할 수 있습니다.
BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Column(
children: [
Text('${state.count}', style: TextStyle(fontSize: 32)),
ElevatedButton(
onPressed: () => context.read<CounterBloc>().add(Increment()),
child: Text('Increment'),
),
],
);
},
)
⚙️ flutter_bloc 패키지 설치
BLoC 패턴을 간단히 구현하려면 flutter_bloc 패키지를 사용하세요.
dependencies:
flutter_bloc: ^8.1.3
이후 BlocProvider로 Bloc을 위젯 트리에 주입하면 됩니다.
BlocProvider(
create: (context) => CounterBloc(),
child: CounterScreen(),
);
💡 Cubit vs Bloc 차이점
Cubit은 Bloc의 간소화된 버전입니다.
Event를 따로 정의하지 않고, 바로 메서드를 호출해서 상태를 변경할 수 있습니다.
// Cubit 예시
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
}
작은 프로젝트나 단순한 상태관리에는 Cubit이, 복잡한 앱 구조에서는 Bloc이 적합합니다.
📱 정리
- ✅ UI와 비즈니스 로직을 완전히 분리할 수 있다.
- ✅ 테스트하기 쉽고, 유지보수가 편하다.
- ✅ 확장성이 뛰어나며 대규모 앱에 적합하다.
Flutter의 BLoC 패턴은 초반에 다소 복잡하게 느껴질 수 있지만, 익숙해지면 가장 깔끔하고 안정적인 구조를 제공합니다.
🏁 마무리
Flutter에서 BLoC 패턴은 단순한 상태관리를 넘어 앱 구조 전체를 체계적으로 관리하게 도와줍니다. 만약 Flutter 프로젝트를 장기적으로 유지보수할 계획이라면, BLoC 패턴을 꼭 익혀두세요.
#Flutter #BLoC #flutter_bloc #Cubit #StateManagement #모바일앱개발
