[flutter] RxDart를 활용한 상태 관리 패턴(BLoC) 구현 방법

05 Dec 2023

flutter

Flutter는 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 강력한 UI 라이브러리와 병렬 처리, 네트워킹 등 다양한 기능을 제공합니다. 그러나 앱의 복잡성이 증가할수록 상태 관리는 어려워질 수 있습니다. 이를 해결하기 위해 “BLoC (Business Logic Component)” 패턴을 사용할 수 있습니다.

BLoC 패턴은 UI와 비즈니스 로직을 분리하여 앱의 상태를 효과적으로 관리하는 방법입니다. RxDart는 Dart 언어를 위한 반응형 프로그래밍 확장 라이브러리로, BLoC 패턴의 구현에 매우 유용합니다.

RxDart 의존성 추가

먼저, pubspec.yaml 파일에서 RxDart를 프로젝트에 추가해야 합니다. 아래와 같이 dependencies 섹션에 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.25.0

저장 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 다운로드합니다.

BLoC 클래스 작성

BLoC 클래스는 앱의 비즈니스 로직을 담당하며, Sink와 Stream을 사용하여 상태를 관리합니다. 예를 들어, 간단한 카운터 앱의 UI와 상태를 관리하는 BLoC 클래스를 구현해보겠습니다.

import 'package:rxdart/rxdart.dart';

class CounterBloc {
  final _counter = BehaviorSubject<int>.seeded(0);
  Stream<int> get counterStream => _counter.stream;
  Function(int) get updateCounter => _counter.sink.add;

  dispose() {
    _counter.close();
  }
}

위의 코드에서 _counter Stream을 생성하고, BehaviorSubject를 사용하여 초기값이 0인 상태로 초기화합니다. counterStream getter로 _counter Stream을 노출시키고, updateCounter 메소드를 사용하여 상태를 업데이트할 수 있도록 합니다.

UI와의 연결

BLoC 클래스를 사용하기 위해서는 UI와 BLoC 클래스를 연결해야 합니다. 예를 들어, 위에서 작성한 카운터 앱의 UI와 BLoC 클래스를 연결하려면 아래와 같이 작성할 수 있습니다.

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  final _counterBloc = CounterBloc();

  @override
  void dispose() {
    _counterBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: _counterBloc.counterStream,
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        }
        return Scaffold(
          appBar: AppBar(
            title: Text('Counter App'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Count:',
                  style: TextStyle(fontSize: 24),
                ),
                Text(
                  '${snapshot.data}',
                  style: TextStyle(fontSize: 48),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => _counterBloc.updateCounter(snapshot.data + 1),
          ),
        );
      },
    );
  }
}

위의 코드에서 _counterBloc 인스턴스를 생성하여 UI와 연결합니다. StreamBuilder 위젯을 사용하여 _counterBloc.counterStream을 구독하고, Stream의 데이터를 UI에 반영합니다. 또한, FAB (Floating Action Button)을 통해 카운터 값을 증가시킬 수 있는 메소드를 호출합니다.

결론

Flutter에서 RxDart를 사용하여 BLoC 패턴을 구현하는 방법에 대해 알아보았습니다. BLoC 패턴은 앱의 복잡성을 관리하기 위해 매우 유용한 패턴으로, RxDart 확장 라이브러리의 도움을 받으면 더욱 효과적으로 구현할 수 있습니다. 이를 통해 앱의 상태 관리와 UI 업데이트를 선언적이고 반응적으로 다룰 수 있습니다.

더 자세한 내용은 아래의 링크를 참조해주세요: