Flutter 네트워크 통신 기초: HTTP 요청 보내기

Flutter 네트워크 통신 기초: HTTP 요청 보내기

Flutter에서 네트워크 통신은 외부 API와 데이터를 교환하거나 앱에서 실시간 정보를 표시하는 데 필수적입니다.
이 글에서는 HTTP 요청을 보내고 응답을 처리하는 기본적인 방법을 알아봅니다.

---

1. HTTP 패키지 설치

Flutter에서 HTTP 요청을 처리하려면 http 패키지를 사용합니다. 다음 단계를 따라 설정합니다.

1.1 pubspec.yaml에 패키지 추가

dependencies:
  http: ^latest_version

1.2 패키지 설치

터미널에서 다음 명령어를 실행합니다:

flutter pub get

---

2. GET 요청 보내기

GET 요청은 서버에서 데이터를 가져오는 데 사용됩니다.

2.1 코드 예제: GET 요청

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

class GetRequestExample extends StatefulWidget {
  @override
  _GetRequestExampleState createState() => _GetRequestExampleState();
}

class _GetRequestExampleState extends State {
  String? _responseData;

  Future fetchData() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');

    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        setState(() {
          _responseData = data['title'];
        });
      } else {
        print('Failed to load data');
      }
    } catch (error) {
      print('Error: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GET Request Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Fetch Data'),
            ),
            SizedBox(height: 20),
            _responseData != null ? Text(_responseData!) : Text('No data fetched'),
          ],
        ),
      ),
    );
  }
}

2.2 실행 결과

• 버튼을 클릭하면 서버에서 데이터를 가져와 화면에 표시합니다.

---

3. POST 요청 보내기

POST 요청은 서버에 데이터를 전송할 때 사용됩니다.

3.1 코드 예제: POST 요청

class PostRequestExample extends StatefulWidget {
  @override
  _PostRequestExampleState createState() => _PostRequestExampleState();
}

class _PostRequestExampleState extends State {
  String? _responseMessage;

  Future sendData() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final body = json.encode({
      'title': 'Flutter POST Request',
      'body': 'This is a test post',
      'userId': 1,
    });

    try {
      final response = await http.post(
        url,
        headers: {'Content-Type': 'application/json'},
        body: body,
      );

      if (response.statusCode == 201) {
        final data = json.decode(response.body);
        setState(() {
          _responseMessage = 'Post created: ${data['id']}';
        });
      } else {
        print('Failed to send data');
      }
    } catch (error) {
      print('Error: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('POST Request Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: sendData,
              child: Text('Send Data'),
            ),
            SizedBox(height: 20),
            _responseMessage != null ? Text(_responseMessage!) : Text('No response yet'),
          ],
        ),
      ),
    );
  }
}

3.2 실행 결과

• 버튼을 클릭하면 서버에 데이터를 전송하고 생성된 리소스 ID를 화면에 표시합니다.

---

4. 에러 처리

네트워크 요청은 다양한 에러 상황이 발생할 수 있으므로 이를 처리하는 것이 중요합니다.

4.1 일반적인 에러 처리 방법

• 타임아웃: 요청 시간이 초과될 경우를 처리합니다.
• 상태 코드 확인: 서버 응답 코드에 따라 적절한 동작을 수행합니다.
• try-catch 블록: 예외 상황을 처리합니다.

4.2 타임아웃 처리 예제

try {
  final response = await http.get(url).timeout(Duration(seconds: 5));
  if (response.statusCode == 200) {
    // 데이터 처리
  }
} catch (error) {
  print('Error: $error');
}

---

5. JSON 데이터 처리

Flutter에서는 dart:convert의 json.decode와 json.encode를 사용하여 JSON 데이터를 처리합니다.

5.1 JSON 디코딩

final decodedData = json.decode(response.body);
print(decodedData['title']);

5.2 JSON 인코딩

final encodedData = json.encode({'key': 'value'});
print(encodedData);

---

6. 결론

Flutter에서 HTTP 요청을 보내고 응답을 처리하는 것은 네트워크 기반 앱 개발의 기본입니다.
GET과 POST 요청을 이해하고 적절한 에러 처리를 추가하여 안정적인 네트워크 통신을 구현해 보세요.
다음 글에서는 REST API와의 고급 통신을 다룰 예정입니다.

---

참고 자료

• HTTP 패키지 공식 문서: https://pub.dev/packages/http
• JSONPlaceholder API: https://jsonplaceholder.typicode.com