[flutter] 플러터 RxDart를 활용한 웹 서비스 API 연동 처리 방법

소개

플러터(Flutter)는 모바일 애플리케이션 개발을 위한 크로스 플랫폼 프레임워크로, 효율적인 비동기 프로그래밍을 위해 RxDart를 사용할 수 있습니다. 이 문서에서는 RxDart를 사용하여 웹 서비스 API와의 연동을 처리하는 방법을 알아보겠습니다.

RxDart란?

RxDart는 Dart 언어를 위한 라이브러리로, 리액티브 프로그래밍 패턴을 구현하는 데 사용됩니다. RxDart는 옵저버 패턴, 다중 채널 구독 및 데이터 변환과 같은 기능을 제공하여 비동기 프로그래밍을 단순하게 처리할 수 있습니다.

웹 서비스 API 연동

웹 서비스 API와의 연동을 위해 플러터에서는 http 패키지를 사용합니다. 이 패키지는 HTTP 요청을 보내고 응답을 받는 데 사용됩니다. RxDart를 사용하여 API 연동을 처리하려면 다음 단계를 따르면 됩니다.

1. 의존성 추가

pubspec.yaml 파일에 다음과 같이 httprxdart 패키지를 추가해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.2
  rxdart: ^0.24.1

2. API 호출 처리

다음은 RxDart를 사용하여 웹 서비스 API를 호출하고 응답을 처리하는 예제입니다.

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

class ApiService {
  final _apiUrl = 'https://api.example.com'; // API 주소

  BehaviorSubject<List<dynamic>> _apiResponse = BehaviorSubject<List<dynamic>>();

  Stream<List<dynamic>> get apiResponse => _apiResponse.stream;

  void fetchData() async {
    try {
      final response = await http.get(_apiUrl);
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        _apiResponse.add(data);
      } else {
        throw Exception('API 호출에 실패했습니다.');
      }
    } catch (error) {
      throw Exception('API 호출에 실패했습니다. 에러: $error');
    }
  }
}

위의 예제에서 fetchData() 함수는 API를 호출하고 응답을 _apiResponse 스트림에 추가합니다. 이 스트림은 apiResponse 게터를 통해 구독될 수 있습니다.

3. API 연동 처리

API 연동을 위해 위에서 정의한 ApiService 클래스를 사용할 수 있습니다. 예를 들어, 화면 위젯에서 API를 호출하고 결과를 받아오는 방법은 다음과 같습니다.

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  final _apiService = ApiService();

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

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<dynamic>>(
      stream: _apiService.apiResponse,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          // TODO: 데이터로 렌더링
        } else if (snapshot.hasError) {
          // TODO: 에러 처리
        }
        return SingleChildScrollView(
          child: Column(
            children: [
              // TODO: 로딩 상태 표시
            ],
          ),
        );
      },
    );
  }
}

initState()에서 API를 호출하기 위해 _apiService.fetchData()를 호출하고, StreamBuilder 위젯을 사용해 _apiService.apiResponse 스트림을 구독하여 데이터를 받아옵니다. 받아온 데이터는 화면에 렌더링되고, 에러가 발생한 경우에는 에러 처리가 되도록 구현할 수 있습니다.

마무리

이 문서에서는 RxDart를 사용하여 플러터에서 웹 서비스 API와의 연동을 처리하는 방법을 알아보았습니다. RxDart를 활용하면 비동기 프로그래밍을 간편하게 처리할 수 있으며, http 패키지와 함께 사용하면 웹 서비스와의 통신을 손쉽게 구현할 수 있습니다. 추가적인 자세한 내용은 RxDart와 http 패키지의 공식 문서를 참조하시기 바랍니다.