[flutter] RxDart로 비동기 처리하기

05 Dec 2023

flutter

Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, Dart 언어를 기반으로 구축되었습니다. 비동기 처리는 모바일 앱 개발에서 중요한 요소 중 하나이며, RxDart는 Flutter에서 이를 쉽게 구현할 수 있도록 도와주는 라이브러리입니다.

RxDart란?

RxDart는 Dart 언어를 위한 반응형 프로그래밍 패키지입니다. 이 패키지는 Reactive Extensions (Rx) 패턴을 Dart에 적용하여 앱 내의 데이터나 이벤트를 관리하고 변형하는 작업을 용이하게 해줍니다. RxDart를 사용하면 비동기 코드를 간단하게 작성할 수 있으며, 복잡한 상태 관리를 효과적으로 처리할 수 있습니다.

RxDart 설치하기

RxDart를 사용하기 위해 pubspec.yaml 파일에 의존성을 추가해야 합니다. 아래와 같이 dependencies 섹션에 RxDart 패키지를 추가하세요.

dependencies:
  rxdart: ^0.26.0

의존성 추가 후, 터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드 및 설치하세요.

RxDart를 이용한 비동기 처리 예제

RxDart를 사용하여 비동기 코드를 작성하는 방법을 알아보겠습니다. 예를 들어, 백엔드 서버에서 데이터를 가져와 화면에 표시하는 작업을 진행한다고 가정해봅시다.

import 'package:rxdart/rxdart.dart';

class DataBloc {
  final BehaviorSubject<String> _dataSubject = BehaviorSubject<String>();

  Stream<String> get dataStream => _dataSubject.stream;

  fetchData() {
    // 데이터를 비동기적으로 가져오는 작업
    Future.delayed(Duration(seconds: 2), () {
      var data = "Fetched data";
      _dataSubject.add(data);
    });
  }

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

위 예제에서는 DataBloc이라는 클래스를 사용하여 데이터를 관리합니다. BehaviorSubject는 RxDart의 주요 클래스 중 하나로, 데이터의 변화를 구독할 수 있는 스트림을 제공합니다. _dataSubject는 데이터의 변화를 발생시킬 때 사용되며, dataStream은 이를 외부에 제공하는 getter 메소드입니다.

fetchData 메소드는 비동기적으로 데이터를 가져오는 작업을 수행합니다. 해당 작업은 2초 뒤에 완료되며, 완료되면 _dataSubject를 통해 데이터를 스트림에 추가합니다.

예제에서는 dispose 메소드를 생성하여 DataBloc 인스턴스가 더 이상 사용되지 않을 때 스트림을 종료하도록 처리했습니다.

RxDart를 이용한 비동기 처리 사용하기

이제 비동기 작업을 사용하여 데이터를 가져오고 화면에 표시하는 방법을 알아보겠습니다.

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  final DataBloc _dataBloc = DataBloc();

  @override
  void initState() {
    super.initState();
    _dataBloc.fetchData();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My Screen"),
      ),
      body: Center(
        child: StreamBuilder<String>(
          stream: _dataBloc.dataStream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data);
            } else if (snapshot.hasError) {
              return Text("Error occurred");
            } else {
              return CircularProgressIndicator();
            }
          }
        ),
      ),
    );
  }
}

위 예제에서는 MyScreen 클래스에서 _dataBloc을 생성하고 데이터를 가져오는 작업을 수행합니다. initState에서 fetchData 메소드를 호출하여 데이터를 가져온 후, dispose에서 dispose 메소드를 호출하여 리소스를 정리합니다.

화면에 데이터를 표시하기 위해 StreamBuilder 위젯을 사용합니다. dataStream을 구독하고, 스냅샷의 상태에 따라 UI를 업데이트합니다.

결론

이제 RxDart를 사용하여 비동기 코드를 쉽게 작성하고 관리하는 방법을 알게 되었습니다. RxDart는 Flutter 앱 개발을 더욱 효율적으로 만들어주는 강력한 도구입니다. 추가로 공식 문서나 다양한 예제를 인용하여 더 많은 기능을 배울 수 있습니다.

RxDart란?

RxDart 설치하기

RxDart를 이용한 비동기 처리 예제

RxDart를 이용한 비동기 처리 사용하기

결론

참고 자료