Flutter에서 API 데이터 불러오기: Http 패키지 사용법

Flutter는 모바일 앱 개발에서 API를 사용해 데이터를 불러오는 작업이 자주 필요합니다. 이를 위해 Flutter에서는 다양한 HTTP 클라이언트를 제공하는데, 그 중 가장 기본적이면서 널리 사용되는 것이 http 패키지입니다.

이 글에서는 http 패키지를 이용해 API에서 데이터를 불러오는 방법을 단계별로 설명하고, 이를 쉽게 적용할 수 있는 방법에 대해 다뤄보겠습니다.

1. Http 패키지 소개

Flutter에서 http 패키지는 서버와 통신하여 데이터를 송수신할 수 있게 도와주는 기본적인 패키지입니다. 이를 통해 GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 수행할 수 있습니다. 이 패키지를 사용하면 JSON 데이터를 서버에서 불러와 앱에 표시하거나, 앱에서 서버로 데이터를 전송할 수 있습니다.

먼저, http 패키지를 사용하기 위해서는 pubspec.yaml 파일에 의존성을 추가해야 합니다.

pubspec.yaml에 http 패키지 추가

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4

http 패키지를 추가한 후에는 터미널에서 flutter pub get 명령어를 실행해 의존성을 설치합니다.

2. Http 패키지를 이용한 GET 요청

GET 요청은 서버에서 데이터를 가져오는 가장 기본적인 방법입니다. 예를 들어, 특정 API에서 JSON 데이터를 가져와 이를 화면에 표시할 수 있습니다. 먼저, 간단한 예제를 통해 GET 요청을 사용하는 방법을 살펴보겠습니다.

GET 요청 예제

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiExample extends StatefulWidget {
  @override
  _ApiExampleState createState() => _ApiExampleState();
}

class _ApiExampleState extends State<ApiExample> {
  String data = "데이터를 불러오는 중...";

  // API 요청을 보내고 데이터를 받아오는 함수
  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      // JSON 데이터 파싱
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      throw Exception('데이터를 불러오는데 실패했습니다');
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('API 데이터 불러오기')),
      body: Center(child: Text(data)),
    );
  }
}

위 예제는 간단한 GET 요청을 통해 데이터를 가져오는 코드입니다. http.get 메서드를 사용하여 특정 URL에서 데이터를 가져오고, 응답을 받아 JSON 데이터를 파싱한 후 UI에 표시합니다.

코드 설명

1. http.get: API 요청을 보내는 함수입니다. 여기서 Uri.parse()로 요청할 API의 URL을 전달합니다.
2. response.statusCode: 서버에서 반환한 응답 코드입니다. 상태 코드가 200이면 성공적인 요청으로 간주하고, 데이터를 파싱합니다.
3. json.decode: 응답 데이터를 JSON 형태로 파싱합니다. 서버에서 받아온 데이터가 JSON 형식일 경우 이를 Map 형태로 변환하여 사용할 수 있습니다.
4. setState: 상태를 업데이트하여 새롭게 받아온 데이터를 UI에 반영합니다.

3. POST 요청

POST 요청은 서버에 데이터를 전송하거나 새로운 리소스를 생성할 때 사용됩니다. 예를 들어, 사용자가 입력한 데이터를 서버에 보내는 상황에서 유용하게 사용됩니다.

POST 요청 예제

Future<void> sendData(String title, String body) async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
      'body': body,
    }),
  );

  if (response.statusCode == 201) {
    print('데이터 전송 성공');
  } else {
    throw Exception('데이터 전송 실패');
  }
}

위 예제에서는 사용자가 입력한title과body데이터를 JSON 형식으로 변환하여 서버에 전송합니다.http.post메서드를 사용해 데이터를 서버로 보내고, 응답 코드가 201(성공)인 경우 데이터를 성공적으로 전송했다는 메시지를 출력합니다.

코드 설명

1. http.post: 서버로 데이터를 전송하는 요청입니다. headers와 body를 함께 전달하여 데이터 전송 형식을 지정합니다.
2. jsonEncode: Map 형식의 데이터를 JSON 문자열로 변환합니다.
3. Content-Type: JSON 형식으로 데이터를 전송할 때 Content-Type을 application/json으로 설정해 줍니다.

4. 비동기 처리와 에러 핸들링

API 호출은 네트워크 통신이기 때문에, 요청이 완료될 때까지 시간이 걸립니다. 따라서 비동기 처리와 에러 핸들링이 매우 중요합니다. Flutter에서 비동기 처리를 위해 async와 await 키워드를 사용하며, 에러가 발생할 경우 예외를 처리하는 로직을 추가하는 것이 좋습니다.

에러 핸들링 예제

Future<void> fetchData() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      // 정상적으로 데이터를 받아왔을 때 처리
      setState(() {
        data = json.decode(response.body)['title'];
      });
    } else {
      throw Exception('서버 응답 오류');
    }
  } catch (error) {
    print('에러 발생: $error');
  }
}

위 코드는try-catch구문을 사용해 에러를 핸들링합니다. 서버에서 데이터를 받아오는 중 오류가 발생하면catch블록에서 해당 오류를 처리합니다.

5. API 데이터 처리 시 고려 사항

• 네트워크 상태: 네트워크 상태에 따라 요청이 실패할 수 있으므로, 네트워크 연결이 불안정할 때를 대비해 에러 처리가 필요합니다.
• 로딩 상태 표시: 데이터를 불러오는 동안 로딩 스피너를 표시해 사용자 경험을 개선할 수 있습니다. 예를 들어, CircularProgressIndicator를 사용해 데이터를 불러오는 동안 로딩 상태를 표시할 수 있습니다.

로딩 상태 표시 예시

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('API 데이터 불러오기')),
    body: Center(
      child: data == null ? CircularProgressIndicator() : Text(data),
    ),
  );
}

데이터를 불러오는 동안 CircularProgressIndicator를 표시하고, 데이터가 로드되면 이를 Text 위젯에 출력합니다.

6. 패키지 버전 관리

http 패키지는 지속적으로 업데이트되므로, 사용하는 버전이 최신 버전인지 확인하는 것이 중요합니다. pubspec.yaml 파일에 버전을 명시하여, 버전 관리를 확실하게 할 수 있습니다.

결론

Flutter에서 http 패키지를 사용하면 간단하게 API와 통신하여 데이터를 주고받을 수 있습니다. GET 요청을 통해 데이터를 불러오고, POST 요청을 통해 데이터를 서버에 전송하는 방법을 익히면, 다양한 API와의 연동이 가능해집니다.

비동기 처리와 에러 핸들링을 통해 안정적인 네트워크 요청을 만들고, 사용자 경험을 고려한 로딩 상태 표시도 중요합니다. Flutter 앱 개발에서 서버와의 통신은 필수적인 부분이므로, 이번 가이드를 통해 API 데이터를 처리하시는 데 도움이 되었으면 좋겠습니다.