HTTP 통신으로 뉴스 불러오기 — http 패키지와 JSON 파싱 완전정복

뉴스 앱을 만들 때, 데이터를 어디선가 불러와야 한다.
그 어디선가는 보통 API 서버이고, 데이터를 JSON 형태로 내려준다.
그리고 Flutter에서는 http 패키지로 이 JSON 데이터를 가져와서 보여줄 수 있다.

이 글에서는 http 패키지를 사용하는 방법부터, JSON 파싱, 모델 클래스 구성까지 실전 예제로 정리해본다.

---

📦 http 패키지 설치하기

// pubspec.yaml
dependencies:
  http: ^0.13.5

설치 후에는 반드시 flutter pub get을 해줘야 한다.

---

🌐 예시 API 호출해보기

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

Future<void> fetchNews() async {
  final response = await http.get(Uri.parse('https://example.com/news'));

  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print(data);  // JSON 출력
  } else {
    throw Exception('뉴스 불러오기 실패');
  }
}

http 요청은 async/await 패턴을 활용하며, 결과는 JSON 문자열로 오기 때문에
jsonDecode()로 Map/List 구조로 변환해줘야 한다.

---

🧩 JSON을 모델로 변환하기

가져온 JSON을 바로 사용하면 에러가 생기기 쉽다.
따라서 데이터 구조에 맞게 모델 클래스를 만들어두는 것이 좋다.

예시 JSON

{
  "title": "오늘의 뉴스",
  "summary": "간단한 요약",
  "publishedAt": "2025-05-27T14:00:00Z"
}

모델 클래스 만들기

class News {
  final String title;
  final String summary;
  final DateTime publishedAt;

  News({required this.title, required this.summary, required this.publishedAt});

  factory News.fromJson(Map<String, dynamic> json) {
    return News(
      title: json['title'],
      summary: json['summary'],
      publishedAt: DateTime.parse(json['publishedAt']),
    );
  }
}

리스트로 받아올 경우

final List<dynamic> list = jsonDecode(response.body);
final newsList = list.map((e) => News.fromJson(e)).toList();

뉴스 API는 보통 JSON 배열로 여러 개의 뉴스 아이템을 한 번에 주기 때문에
위처럼 리스트 변환이 필수다.

---

🖥️ 화면에 데이터 뿌리기

FutureBuilder를 사용하면 비동기 데이터를 쉽게 UI에 반영할 수 있다.

FutureBuilder<List<News>>(
  future: fetchNewsList(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return Text('에러 발생');
    }
    final news = snapshot.data!;
    return ListView.builder(
      itemCount: news.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(news[index].title),
          subtitle: Text(news[index].summary),
        );
      },
    );
  },
)

---

🔐 실무에서 유용한 팁

• API 통신은 services/news_api_service.dart 파일로 분리하자
• 모델 클래스는 models/news.dart에 따로 관리하자
• 에러 메시지나 빈 상태를 보여주는 UI도 꼭 고려하자

---

🧘 마무리하며

http 패키지를 이용한 JSON 파싱은 뉴스앱 개발의 핵심 중 하나다.
단순한 기능처럼 보이지만, 이 과정을 구조화하면 앱의 완성도는 한층 올라간다.

데이터를 연결한다는 건, 사용자와 콘텐츠를 연결하는 일이다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 뉴스 앱 만들기 여정입니다.