플러터 강좌 - 15.6 JSON 데이터

최근 모바일 앱 개발에서 JSON(JavaScript Object Notation) 데이터 포맷은 데이터의 전달 및 저장에 널리 사용되고 있습니다. JSON 데이터는 구조적으로 간단하고, 다른 데이터 포맷에 비해 가독성이 뛰어나며, 대부분의 프로그래밍 언어에서 쉽게 파싱할 수 있는 장점이 있습니다.

1. JSON의 정의와 특징

JSON은 경량 데이터 교환 포맷으로, 사람과 기계 모두 읽고 쓸 수 있는 형식입니다. JSON은 JavaScript 객체 리터럴의 문법을 기반으로 하지만, 다양한 언어 간의 데이터 상호 교환에서도 매우 유용합니다. JSON의 주요 특징은 다음과 같습니다:

경량화: 간단한 구조로 되어 있어 데이터 전송에 필요한 용량이 적습니다.
가독성: 사람이 쉽게 읽을 수 있는 형식입니다.
유연성: 복잡한 데이터 구조를 표현할 수 있습니다

2. JSON 형식

JSON 데이터는 키와 값을 쌍으로 묶어서 표현합니다. 다음은 JSON 객체의 예시입니다:

{
    "name": "홍길동",
    "age": 30,
    "isDeveloper": true,
    "skills": ["Dart", "Flutter", "JavaScript"],
    "address": {
        "city": "서울",
        "postalCode": "12345"
    }
}

3. 플러터에서 JSON 데이터 사용하기

플러터에서 JSON 데이터를 활용하기 위해선 HTTP 요청을 통해 외부 API에서 데이터를 가져오거나, 로컬 JSON 파일에서 데이터를 읽는 방법이 있습니다. 이번 섹션에서는 두 가지 방법을 통해 JSON 데이터를 사용할 수 있는 기본적인 절차를 설명합니다.

3.1. HTTP 요청을 통한 JSON 데이터 가져오기

플러터에서 HTTP 패키지를 사용하여 API로부터 JSON 데이터를 받아올 수 있습니다.

다음은 API로부터 JSON 데이터를 불러오는 코드 예시입니다:

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

Future fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));

    if (response.statusCode == 200) {
        // 서버에서 데이터가 성공적으로 반환되었을 때
        var jsonData = json.decode(response.body);
        print(jsonData);
    } else {
        throw Exception('데이터를 로드하는 중 오류 발생');
    }
}

3.2. 로컬 JSON 파일에서 데이터 읽기

경우에 따라 앱에 내장된 JSON 파일에서 데이터를 읽을 수도 있습니다. 다음과 같은 방법으로 JSON 파일을 로드할 수 있습니다.

1단계: 앱의 assets 폴더에 JSON 파일을 추가합니다.

2단계: pubspec.yaml 파일에 assets를 추가합니다.

flutter:
    assets:
        - assets/data.json

3단계: JSON 파일을 읽기 위한 코드를 작성합니다:

import 'dart:convert';
import 'package:flutter/services.dart' as rootBundle;

Future loadJsonData() async {
    final jsonData = await rootBundle.rootBundle.loadString('assets/data.json');
    final data = json.decode(jsonData);
    print(data);
}

4. JSON 데이터를 모델 클래스와 연결하기

JSON 데이터를 플러터 앱에서 활용하기 위해서는 해당 데이터를 모델 클래스로 변환하는 것이 일반적입니다. 다음은 JSON 데이터를 모델 클래스로 변환하는 방법에 대한 예시입니다.

class User {
    String name;
    int age;
    bool isDeveloper;
    List skills;

    User({required this.name, required this.age, required this.isDeveloper, required this.skills});

    factory User.fromJson(Map json) {
        return User(
            name: json['name'],
            age: json['age'],
            isDeveloper: json['isDeveloper'],
            skills: List.from(json['skills']),
        );
    }
}

클래스를 통해 JSON 데이터를 객체로 쉽게 변환하여 사용할 수 있습니다.

5. JSON 데이터를 플러터 위젯에 표시하기

JSON 데이터를 불러온 후, 해당 데이터를 플러터 위젯에 표시하는 방법을 알아보겠습니다. 예를 들어, 사용자 정보를 화면에 표시하는 위젯을 만들어 보겠습니다.

class UserProfile extends StatelessWidget {
    final User user;

    UserProfile({required this.user});

    @override
    Widget build(BuildContext context) {
        return Column(
            children: [
                Text('이름: ${user.name}'),
                Text('나이: ${user.age}'),
                Text('개발자 여부: ${user.isDeveloper ? "예" : "아니요"}'),
                Text('기술: ${user.skills.join(', ')}'),
            ],
        );
    }
}

6. 예외 처리 및 오류 관리

JSON 데이터 작업 중 발생할 수 있는 오류를 처리하는 것은 매우 중요합니다. HTTP 요청이나 JSON 파싱 과정에서 발생할 수 있는 예외를 처리하는 방법에 대하여 알아보겠습니다.

Future fetchData() async {
    try {
        final response = await http.get(Uri.parse('https://api.example.com/data'));
        if (response.statusCode == 200) {
            // 성공적으로 JSON 데이터를 가져옴
            var jsonData = json.decode(response.body);
            print(jsonData);
        } else {
            throw Exception('서버 오류: ${response.statusCode}');
        }
    } catch (e) {
        print('오류 발생: $e');
    }
}

7. JSON과 다른 데이터 포맷 비교

JSON은 XML, CSV와 같은 다른 데이터 형식과 비교할 때 여러 이점과 단점이 있습니다. 다음은 JSON과 XML의 비교입니다:

특징	JSON	XML
가독성	우수함	보통
데이터 크기	작음	큼
구조	Key-Value 쌍	태그 기반

8. 마무리

이 강좌에서는 플러터에서 JSON 데이터를 처리하는 기본적인 방법에 대해 살펴보았습니다. JSON을 사용함으로써 데이터 관리를 용이하게 하고, 필요한 다양한 데이터 형식을 지탱할 수 있는 유연성을 제공합니다. 실제 프로젝트에서 JSON 데이터 사용에 대한 경험을 바탕으로 더 많은 기능을 구현해보시기 바랍니다.

추가 자료가 필요하면 Flutter 공식 문서를 참고하시기 바랍니다: Flutter Documentation.

플러터 강좌 – 15.6 JSON 데이터