BLoC 패턴: 초간단 이해하기

🎬 영화관 비유로 이해하기

BLoC을 영화관에 비유해볼게요:

• Event (이벤트): 관객이 극장 직원에게 하는 요청
  • "팝콘 주세요", "영화 시작해주세요", "화장실 어디예요?"
• BLoC (블록): 극장 직원
  • 관객의 요청을 받아서 처리함
• State (상태): 극장의 현재 상황
  • "영화 상영 중", "팝콘 준비됨", "영화 종료"

---

📱 코드로 보는 실제 예시 (테마 변경)

당신의 프로젝트에서 테마 변경 기능을 예로 들어볼게요:

1️⃣ Event (이벤트) - "무엇을 요청할까?"

// theme_event.dart

// 이벤트 = 사용자가 할 수 있는 행동들
sealed class ThemeEvent {
  // 1. 앱 시작할 때 테마 초기화
  const factory ThemeEvent.init() = _InitialEvent;
  
  // 2. 특정 테마로 변경
  const factory ThemeEvent.change({ThemeType type}) = _ChangeThemeEvent;
  
  // 3. 테마 토글 (라이트 ↔ 다크)
  const factory ThemeEvent.toggle() = _ToggleThemeEvnet;
}

 

쉽게 말하면:

• init: "앱 켰어, 저장된 테마 불러와줘!"
• change: "다크 모드로 바꿔줘!"
• toggle: "지금 테마 반대로 바꿔줘!"

---

2️⃣ State (상태) - "현재 상황은?"

// theme_state.dart

class ThemeState {
  final ThemeType type; // 현재 테마가 뭔지
  
  const ThemeState({
    this.type = ThemeType.light, // 기본은 라이트 모드
  });
}

 

쉽게 말하면:

• "지금 앱이 다크 모드인지 라이트 모드인지" 저장하는 곳
• UI는 이 상태를 보고 화면을 그림

---

3️⃣ BLoC (블록) - "이벤트 처리하는 직원"

// theme_bloc.dart

class ThemeBloc extends Bloc<ThemeEvent, ThemeState> {
  ThemeBloc() : super(const ThemeState()) {
    
    // 이벤트가 들어오면 switch로 처리
    on<ThemeEvent>((event, emit) async {
      switch (event) {
        case _InitialEvent():
          await _initTheme(event, emit);
        case _ChangeThemeEvent():
          await _changeTheme(event, emit);
        case _ToggleThemeEvnet():
          await _toggleTheme(event, emit);
      }
    });
  }

  // 1. 테마 초기화 처리
  Future<void> _initTheme(event, emit) async {
    // 저장된 테마 불러오기
    var result = await getAppThemeUseCase();
    
    // 새로운 상태로 업데이트
    emit(ThemeState(type: result));
  }

  // 2. 테마 변경 처리
  Future<void> _changeTheme(event, emit) async {
    // 새 테마 저장
    await saveAppThemeUseCase(event.type);
    
    // 상태 업데이트
    emit(state.copyWith(type: event.type));
  }

  // 3. 테마 토글 처리
  Future<void> _toggleTheme(event, emit) async {
    // 반대 테마 계산
    var nextTheme = state.type == ThemeType.light 
        ? ThemeType.dark 
        : ThemeType.light;
    
    // 저장하고 상태 업데이트
    await saveAppThemeUseCase(nextTheme);
    emit(state.copyWith(type: nextTheme));
  }
}

 

🔄 전체 흐름 한눈에 보기

 

사용자 버튼 클릭
    ↓
[이벤트 발생] ThemeEvent.toggle()
    ↓
[BLoC이 받음] "오케이, 토글 처리할게!"
    ↓
[처리 로직 실행]
  1. 현재 테마 확인 (state.type)
  2. 반대 테마 계산
  3. 저장소에 저장
    ↓
[새 상태 발행] emit(새로운 ThemeState)
    ↓
[UI 자동 업데이트] 화면이 다크 모드로 변경됨!

---

💡 실제 사용 예시

UI에서 BLoC 사용하기

// 1. BLoC 가져오기
final themeBloc = context.read<ThemeBloc>();

// 2. 이벤트 보내기 (버튼 클릭 시)
ElevatedButton(
  onPressed: () {
    // "테마 토글해줘!" 이벤트 전송
    themeBloc.add(const ThemeEvent.toggle());
  },
  child: Text('테마 변경'),
)

// 3. 상태 변화 감지하기
BlocBuilder<ThemeBloc, ThemeState>(
  builder: (context, state) {
    // state가 바뀔 때마다 이 부분 다시 그려짐
    return Text(
      '현재 테마: ${state.type}' // "현재 테마: dark"
    );
  },
)

---

🎯 핵심 정리

구성 요소역할비유

Event	요청/명령	주문서
State	현재 상황	주문 상태
BLoC	처리하는 사람	직원
emit	상태 변경 알림	진동벨 울림
add	이벤트 보내기	주문하기

---

🤔 자주 하는 질문

Q: 왜 이렇게 복잡하게 하나요? A:

• UI와 비즈니스 로직 분리
• 테스트하기 쉬움
• 상태 관리가 명확함
• 여러 화면에서 같은 상태 공유 가능

Q: Event를 꼭 만들어야 하나요? A: 네! Event가 있어야:

• 어떤 동작들이 가능한지 명확함
• 나중에 코드 찾기 쉬움
• 디버깅할 때 어떤 이벤트가 발생했는지 추적 가능

Q: State는 언제 바뀌나요? A: BLoC에서 emit()을 호출할 때만!

---

📝 간단한 연습 예시

카운터 앱으로 연습해볼까요?

// 1. 이벤트 정의
sealed class CounterEvent {
  const factory CounterEvent.increment() = _Increment;
  const factory CounterEvent.decrement() = _Decrement;
}

// 2. 상태 정의
class CounterState {
  final int count;
  CounterState({this.count = 0});
}

// 3. BLoC 정의
class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState()) {
    on<CounterEvent>((event, emit) {
      switch (event) {
        case _Increment():
          emit(CounterState(count: state.count + 1));
        case _Decrement():
          emit(CounterState(count: state.count - 1));
      }
    });
  }
}

// 4. UI에서 사용
BlocBuilder<CounterBloc, CounterState>(
  builder: (context, state) {
    return Column(
      children: [
        Text('${state.count}'), // 숫자 표시
        ElevatedButton(
          onPressed: () {
            context.read<CounterBloc>()
              .add(const CounterEvent.increment());
          },
          child: Text('+'),
        ),
      ],
    );
  },
)

---

🎨 정리하면

1. Event: "~해줘!" (명령)
2. BLoC: "알았어, 처리할게!" (처리자)
3. State: "지금 상황은 이래!" (결과)
4. UI: State를 보고 화면을 그림

흐름: 버튼 클릭 → Event 발생 → BLoC이 처리 → State 변경 → UI 자동 업데이트

이해되셨나요? 더 궁금한 부분이 있으면 말씀해주세요! 😊