플러터 상태관리: BLoC 심층 가이드

플러터 앱 개발에서 상태 관리는 가장 중요한 부분 중 하나입니다.

BLoC (Business Logic Component)는 Flutter에서 널리 사용되는 상태 관리 패턴으로, 비즈니스 로직과 UI를 명확하게 분리하여 코드의 이해성과 유지 관리성을 높일 수 있도록 합니다.

이 블로그 게시글에서는 BLoC의 기본 개념부터 고급 기능까지 심층적으로 살펴보고, 실제 개발에 활용할 수 있는 구체적인 코드 예시와 활용 팁을 소개합니다.

 

1. BLoC란 무엇인가?

 

BLoC는 비즈니스 로직과 UI를 분리하는 패턴으로, 다음과 같은 주요 특징을 가지고 있습니다.

• 비즈니스 로직 중심: BLoC는 UI와 직접 상호 작용하지 않고, 이벤트를 처리하고 상태를 변경하는 비즈니스 로직에 집중합니다.
• 단방향 데이터 흐름: BLoC는 UI에서 이벤트를 BLoC로 전송하고, BLoC는 상태 변경을 UI로 전달하는 단방향 데이터 흐름을 사용합니다.
• 테스트 가능성: BLoC는 테스트하기 쉽도록 설계되어 있어 코드의 유지 관리성을 높입니다.

2. BLoC 구성 요소

 

BLoC는 다음과 같은 세 가지 주요 구성 요소로 구성됩니다.

• BLoC 클래스: 비즈니스 로직을 구현하는 클래스입니다.
• Event: BLoC로 전송되는 입력 데이터입니다.
• State: BLoC에서 관리하는 상태 데이터입니다.

3. BLoC 사용법

 

BLoC를 사용하려면 다음과 같은 기본 단계를 따릅니다.

 

1. BLoC 클래스 만들기

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterState initialState = CounterState(counter: 0);

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield CounterState(counter: state.counter + 1);
        break;
      case CounterEvent.decrement:
        yield CounterState(counter: state.counter - 1);
        break;
    }
  }
}

 

• Bloc 클래스를 상속받는 클래스를 만들고 초기 상태를 정의합니다.
• mapEventToState() 메서드를 사용하여 이벤트에 대한 처리 로직을 구현합니다.

2. Provider 위젯 사용

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<CounterBloc>(
      create: (context) => CounterBloc(),
      child: CounterWidget(),
    );
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('BLoC Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: ${counterBloc.state.counter}'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => counterBloc.add(CounterEvent.increment),
                  child: Text('Increment'),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  onPressed: () => counterBloc.add(CounterEvent.decrement),
                  child: Text('Decrement'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

• BlocProvider 위젯을 사용하여 BLoC 인스턴스를 제공합니다.
• BlocProvider.of() 메서드를 사용하여 위젯 트리 어디에서든 BLoC 인스턴스에 접근합니다.
• BLoC 인스턴스의 add() 메서드를 사용하여 이벤트를 전송합니다.

4. BLoC 활용 팁

• mapEventToState() 메서드에서 비동기 작업을 처리할 때 yield 대신 emit() 메서드를 사용하세요.
• BlocProvider 외에도 BlocListener 위젯을 사용하여 BLoC 상태 변경에 대한 리액션을 처리할 수 있습니다.
• BlocDelegate 클래스를 사용하여 BLoC 로깅 및 디버깅 기능을 활성화할 수 있습니다.

5. BLoC 고급 기능

 

BLoC는 기본적인 기능 외에도 다음과 같은 고급 기능을 제공합니다.

• 상태 변환: mapEventToState() 메서드에서 여러 상태 변경을 한 번에 처리할 수 있습니다.
• 에러 처리: BlocOnError 클래스를 사용하여 에러 발생 시 처리 로직을 구현할 수 있습니다.
• 다중 BLoC 사용: 여러 BLoC를 결합하여 복잡한 비즈니스 로직을 구현할 수 있습니다.

6. BLoC 활용 예시

• 간단한 카운터 앱: 위에서 소개한 예시처럼 BLoC를 사용하여 간단한 카운터 앱을 만들 수 있습니다.
• 폼 유효성 검사: 사용자 입력 데이터의 유효성을 검사하고 UI에 피드백을 제공하는 데 사용할 수 있습니다.
• API 통신 및 데이터 페칭: API 호출을 처리하고 응답 데이터를 관리하는 데 사용할 수 있습니다.
• 상태 기반 라우팅: 사용자의 상호 작용에 따라 앱의 라우팅을 제어하는 데 사용할 수 있습니다.

7. BLoC 대안

 

BLoC 외에도 Flutter에서 사용할 수 있는 다양한 상태 관리 솔루션이 있습니다.

• Provider: 상태 객체를 사용하여 상태를 관리하는 패턴입니다.
• Redux: 예측 가능한 상태 변경을 위한 상태 관리 라이브러리입니다.
• Get: 간편하고 가벼운 상태 관리 솔루션입니다.

어떤 상태 관리 솔루션을 선택할지는 프로젝트의 특성과 개발자의 선호에 따라 다릅니다.

 

8. 결론

 

BLoC는 Flutter 앱 개발에서 비즈니스 로직과 UI를 명확하게 분리하고 상태를 효율적으로 관리하는 데 도움이 되는 강력한 패턴입니다.

기본적인 개념부터 고급 기능까지 다양한 기능을 제공하며, 다양한 활용 예시가 있습니다.

이 블로그 게시글을 통해 BLoC의 기본적인 사용법과 활용 팁을 이해하셨기를 바랍니다.

더 궁금한 점이나 알아보고 싶은 기능이 있다면 언제든지 댓글 남겨주세요!

 

이 외에도 궁금한 점이나 알아보고 싶은 기능이 있다면 언제든지 댓글 남겨주세요!

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release