Flutter에서 API로 받은 JSON을 사용하는 방법

Flutter에서 API로 받은 JSON을 사용하는 방법: 심층 가이드

플러터는 다양한 기능을 제공하는 강력한 프로그래밍 언어이지만, API로 받은 JSON 데이터를 처리하고 사용하는 데 어려움을 겪는 경우도 있습니다.

JSON은 자바스크립트 객체 표기법(JavaScript Object Notation)의 약자로, 간편하게 데이터를 표현하고 교환할 수 있는 데이터 형식입니다. API는 JSON 형식으로 데이터를 제공하는 경우가 많습니다.

이 블로그 글에서는 Flutter에서 API로 받은 JSON을 사용하는 방법에 대한 심층 가이드를 제공하여 앱 개발자가 JSON 데이터를 효과적으로 활용하고 멋진 앱을 만들 수 있도록 도와드리겠습니다.

 

1. JSON 구조 이해하기

JSON은 다음과 같은 두 가지 기본 구조로 구성됩니다.

• 객체: 키-값 쌍으로 구성됩니다. 키는 문자열이고, 값은 문자열, 숫자, 불리언, 배열 또는 다른 객체일 수 있습니다.
• 배열: 순서대로 나열된 값들의 목록입니다. 값은 문자열, 숫자, 불리언, 객체 또는 다른 배열일 수 있습니다.

예시

다음은 뉴스 기사를 나타내는 JSON 객체입니다.

{
  "source": {
    "id": "abc-news",
    "name": "ABC News"
  },
  "author": "John Doe",
  "title": "New Flutter Update Released",
  "description": "Flutter 3.0 has been released with new features and improvements.",
  "url": "https://flutter.dev/docs/releases/flutter-3",
  "publishedAt": "2023-11-15T12:00:00Z"
}

 

위 JSON 객체에서 다음과 같은 정보를 추출할 수 있습니다.

• 뉴스 기사 출처: source.id, source.name
• 저자: author
• 제목: title
• 설명: description
• URL: url
• 게시일: publishedAt

2. JSON 파싱 라이브러리 활용

Flutter에서 JSON 데이터를 파싱하기 위해 다음과 같은 라이브러리를 사용할 수 있습니다.

 

2.1 dart:convert

dart:convert는 Flutter의 표준 라이브러리이며, 기본적인 JSON 파싱 기능을 제공합니다.

• 장점: 가볍고 사용하기 쉽습니다.
• 단점: JSON 데이터를 Dart 객체로 자동 변환하는 기능이 제한적입니다.

예시:

다음은 dart:convert를 사용하여 JSON 문자열을 Dart 객체로 변환하는 코드입니다.

import 'dart:convert';

void main() {
  final jsonString = '''
  {
    "name": "John Doe",
    "age": 30,
    "city": "Seoul"
  }
  ''';

  // JSON 문자열을 Dart 객체로 변환합니다.
  final json = jsonDecode(jsonString) as Map<String, dynamic>;

  // Dart 객체의 속성에 접근합니다.
  final name = json['name'] as String;
  final age = json['age'] as int;
  final city = json['city'] as String;

  print('이름: $name');
  print('나이: $age');
  print('도시: $city');
}

 

위 코드는 다음과 같은 작업을 수행합니다.

1. jsonString 변수에 JSON 문자열을 저장합니다.
2. jsonDecode 함수를 사용하여 JSON 문자열을 Dart 객체로 변환합니다.
3. Dart 객체의 속성에 접근하여 JSON 데이터를 출력합니다.

2.2 json_annotation

json_annotation은 JSON 데이터를 Dart 객체로 자동으로 변환하는 라이브러리입니다.

• 장점: JSON 데이터를 Dart 객체로 자동 변환하는 기능이 강력합니다.
• 단점: build_runner와 같은 추가적인 도구가 필요합니다.

예시:

다음은 json_annotation을 사용하여 JSON 데이터를 Dart 객체로 자동 변환하는 코드입니다.

Dart

// @JsonSerializable() 어노테이션을 사용하여 JSON 데이터를 Dart 객체로 자동 변환하도록 지정합니다.
@JsonSerializable()
class Person {
  final String name;
  final int age;
  final String city;

  Person({required this.name, required this.age, required this.city});

  // JSON 데이터를 Dart 객체로 변환하는 생성자를 정의합니다.
  factory Person.fromJson(Map<String, dynamic> json) => _$PersonFromJson(json);

  // Dart 객체를 JSON 데이터로 변환하는 메서드를 정의합니다.
  Map<String, dynamic> toJson() => _$PersonToJson(this);
}

void main() {
  final jsonString = '''
  {
    "name": "John Doe",
    "age": 30,
    "city": "Seoul"
  }
  ''';

  // JSON 문자열을 Dart 객체로 자동 변환합니다.
  final person = Person.fromJson(jsonDecode(jsonString));

  print('이름: ${person.name}');
  print('나이: ${person.age}');
  print('도시: ${person.city}');
}

 

위 코드는 다음과 같은 작업을 수행합니다.

1. Person 클래스에 @JsonSerializable 어노테이션을 사용하여 JSON 데이터를 Dart 객체로 자동 변환하도록 지정합니다.
2. fromJson 생성자를 사용하여 JSON 데이터를 Dart 객체로 변환합니다.
3. toJson 메서드를 사용하여 Dart 객체를 JSON 데이터로 변환합니다.
4. Person.fromJson 생성자를 사용하여 JSON 문자열을 Person 객체로 자동 변환합니다.
5. Person 객체의 속성에 접근하여 JSON 데이터를 출력합니다.

2.3 flutter_json

flutter_json은 JSON 데이터를 Dart 객체로 변환하고, 객체를 JSON 데이터로 변환하는 기능을 제공하는 라이브러리입니다.

• 장점: 사용하기 쉽고 직관적인 API를 제공합니다.
• 단점: json_annotation만큼 강력하지는 않습니다.

예시:

다음은 flutter_json을 사용하여 JSON 데이터를 Dart 객체로 변환하는 코드입니다.

import 'package:flutter_json/flutter_json.dart';

void main() {
  final jsonString = '''
  {
    "name": "John Doe",
    "age": 30,
    "city": "Seoul"
  }
  ''';

  // JSON 문자열을 Dart 객체로 변환합니다.
  final person = jsonDecode<Person>(jsonString);

  print('이름: ${person.name}');
  print('나이: ${person.age}');
  print('도시: ${person.city}');
}

 

위 코드는 다음과 같은 작업을 수행합니다.

1. flutter_json 패키지를 가져옵니다.
2. jsonDecode 함수를 사용하여 JSON 문자열을 Person 객체로 변환합니다.
3. Person 객체의 속성에 접근하여 JSON 데이터를 출력합니다.

3. JSON 데이터 활용

JSON 데이터를 파싱한 후에는 다음과 같은 방식으로 활용할 수 있습니다.

• UI 구현: ListView, GridView, ListTile 등의 위젯을 사용하여 JSON 데이터를 기반으로 UI를 구현합니다.
• 데이터 저장: SharedPreferences, Hive 등의 저장소를 사용하여 JSON 데이터를 저장합니다.
• 데이터 계산 및 분석: JSON 데이터를 기반으로 계산이나 분석을 수행합니다.
• 네트워크 통신: JSON 데이터를 사용하여 다른 API를 호출하거나 서버에 데이터를 전송합니다.

4. 주의 사항

• JSON 데이터를 파싱할 때 키 이름 오타, 데이터 형식 불일치 등에 주의해야 합니다.
• JSON 데이터의 구조가 변경될 수 있으므로, API 문서를 꼼꼼하게 확인해야 합니다.
• 민감한 정보가 포함된 JSON 데이터는 안전하게 처리해야 합니다.

5. 마무리

이 블로그 글에서는 Flutter에서 API로 받은 JSON을 사용하는 방법에 대한 심층 가이드를 제공했습니다.

JSON 데이터를 정확하게 파싱하고 활용하는 능력은 앱 개발자에게 필수적인 능력입니다.

위 가이드를 참고하여 JSON 데이터를 효과적으로 활용하고 멋진 앱을 만들 수 있기를 바랍니다.