[flutter] RxDart를 활용한 네트워크 통신 처리하기

05 Dec 2023

flutter

RxDart는 Dart에 대한 반응형 프로그래밍 라이브러리로, 스트림과 이벤트를 효율적으로 처리하기 위한 많은 유틸리티를 제공합니다. 이번 블로그 포스트에서는 RxDart를 사용하여 Flutter 앱에서 네트워크 통신을 처리하는 방법을 알아보겠습니다.

1. RxDart 패키지 추가하기

먼저, pubspec.yaml 파일에 RxDart 패키지를 추가해야 합니다. 다음과 같이 dependencies 섹션에 rxdart를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.26.0

pubspec.yaml 파일을 저장하면 RxDart 패키지가 프로젝트에 추가됩니다.

2. 네트워크 통신을 위한 API 호출하기

RxDart를 사용하여 네트워크 통신을 처리하려면, 먼저 Dart의 http 패키지를 사용하여 API 호출을 수행해야 합니다. http 패키지를 사용하여 데이터를 받아오는 간단한 예제를 살펴보겠습니다:

import 'package:http/http.dart' as http;

class NetworkService {
  static final baseUrl = 'https://api.example.com';

  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('$baseUrl/data'));
    return response.body;
  }
}

위의 코드에서는 baseUrl을 원하는 API 엔드포인트로 변경하면 됩니다. http 패키지의 get 메서드를 사용하여 API 호출을 수행하고, response.body를 반환하여 받아온 데이터를 반환합니다.

3. RxDart로 API 호출 처리하기

이제 RxDart를 활용하여 API 호출을 처리해보겠습니다. 먼저, rxdart 패키지를 가져온 후 BehaviorSubject를 생성합니다. 이는 RxDart에서 가장 일반적으로 사용되는 스트림 유형 중 하나입니다. 코드는 다음과 같습니다:

import 'package:rxdart/rxdart.dart';

class NetworkBloc {
  final _networkService = NetworkService();
  final _dataSubject = BehaviorSubject<String>();

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

  void fetchData() {
    _networkService.fetchData()
      .then((data) => _dataSubject.add(data))
      .catchError((error) => _dataSubject.addError(error));
  }

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

위의 코드에서 NetworkBloc은 네트워크 통신을 처리하는 블록입니다. NetworkService의 인스턴스를 사용하여 데이터를 가져온 후, then을 사용하여 데이터를 _dataSubject에 추가합니다. 에러가 발생하면 catchError를 사용하여 에러도 _dataSubject에 추가합니다.

4. UI와 데이터 바인딩하기

이제 UI에서 데이터를 표시하기 위해 위에서 생성한 NetworkBloc을 사용하여 데이터를 바인딩해보겠습니다. 필요한 위젯을 생성하고, StreamBuilder 위젯을 사용하여 dataStream을 수신하여 UI에 데이터를 표시할 수 있습니다. 코드는 다음과 같습니다:

class MyWidget extends StatelessWidget {
  final networkBloc = NetworkBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: StreamBuilder<String>(
          stream: networkBloc.dataStream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data);
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => networkBloc.fetchData(),
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위의 코드에서 StreamBuilder 위젯은 dataStream을 구독하고, 스트림의 데이터에 따라 UI를 업데이트합니다. 데이터가 있을 때는 Text 위젯에 데이터를 표시하고, 에러가 발생한 경우 에러 메시지를 표시합니다. 데이터가 없으면 CircularProgressIndicator를 표시합니다. 또한 FAB을 통해 데이터를 새로고침할 수 있는 기능을 추가했습니다.

결론

이렇게 Flutter 앱에서 RxDart를 사용하여 네트워크 통신을 처리하는 방법을 알아보았습니다. RxDart를 사용하면 스트림과 이벤트를 강력하게 처리할 수 있으며, Flutter 앱의 효율성과 성능을 향상시킬 수 있습니다.

더 많은 정보와 예제 코드는 RxDart 공식 GitHub 리포지토리를 참조하시기 바랍니다.