Flutter BLoC 패턴 완벽 이해하기

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 #모바일앱개발

IT 잡동사니

이 블로그 검색