[flutter] 플러터 Riverpod와 HTTP 통신 처리 방법

30 Nov 2023

flutter

플러터에서 데이터를 효율적으로 관리하고 상태를 관리하는 라이브러리로 Riverpod가 많이 사용됩니다. 이 글에서는 Riverpod를 사용하여 HTTP 통신을 처리하는 방법을 알아보겠습니다.

Riverpod 개요

Riverpod는 플러터 앱에서 상태 관리를 위한 우수한 도구입니다. Provider 패턴을 사용하여 앱의 상태를 전역으로 관리하고 쉽게 공유할 수 있습니다.

HTTP 통신 처리 방법

1. http 패키지 추가

플러터 앱에서 HTTP 통신을 처리하기 위해 http 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

2. API 호출을 위한 Provider 생성

riverpod 패키지를 추가하고 API 호출을 위한 Provider를 생성합니다.

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

// API 호출을 위한 Provider
final apiProvider = Provider<http.Client>((ref) {
  return http.Client();
});

3. HTTP 통신 처리

API 호출을위한 Provider를 만들었으니 이제 실제로 API 호출을 처리해보겠습니다. 예를 들어, 사용자 데이터를 가져오는 API가 있다고 가정하겠습니다.

import 'dart:convert';

final dataProvider = FutureProvider((ref) async {
  final client = ref.watch(apiProvider);
  final response =
      await client.get(Uri.parse('https://api.example.com/users'));

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    return data;
  } else {
    throw Exception('Failed to fetch data');
  }
});

위의 코드에서는 dataProvider를 통해 사용자 데이터를 가져옵니다. HTTP GET 요청을 통해 API에 접근하고, 응답이 성공적으로 받아와지면 데이터를 반환합니다. 만약 오류가 발생하면 예외를 던집니다.

4. 상태 변경 처리

마지막으로, 데이터가 성공적으로 가져와지면 앱 상태를 변경해야 합니다. 이를 위해 ConsumerWidget을 사용하여 상태를 업데이트하고 화면을 다시 그릴 수 있습니다.

class HomeScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final userData = watch(dataProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('User Data'),
      ),
      body: userData.when(
        data: (data) => ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(data[index]['name']),
              subtitle: Text(data[index]['email']),
            );
          },
        ),
        loading: () => Center(child: CircularProgressIndicator()),
        error: (error, stackTrace) => Center(child: Text('Error: $error')),
      ),
    );
  }
}

위의 코드에서는 userData를 watch하여 데이터의 상태를 확인하고, 상태에 따라 화면을 다르게 표시합니다. 데이터가 성공적으로 가져와지면 ListView를 통해 사용자 데이터를 보여주고, 로딩 중이라면 로딩 스피너를 표시하고, 오류가 발생하면 오류 메시지를 표시합니다.

결론

이렇게 Riverpod와 HTTP 통신을 결합하여 플러터 앱에서 효율적으로 API를 처리할 수 있습니다. Riverpod의 Provider 패턴을 사용하여 상태를 관리하고, http 패키지를 사용하여 HTTP 요청을 처리하면 앱의 성능과 유지 보수성을 크게 향상시킬 수 있습니다.