Flutter의 JSON 데이터 파싱

Flutter에서 JSON 데이터 파싱은 외부 API와의 통신에서 매우 중요한 부분입니다. JSON(JavaScript Object Notation)은 경량 데이터 교환 형식으로 널리 사용되며, Flutter에서는 이를 쉽게 처리할 수 있는 다양한 방법을 제공합니다. 이번 글에서는 Flutter에서 JSON 데이터를 파싱하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. JSON 데이터 파싱의 기본 개념

JSON 데이터는 키-값 쌍으로 이루어진 구조체입니다. Flutter에서는 dart:convert 패키지를 사용하여 JSON 데이터를 디코딩(decoding)하고, Dart 객체로 변환할 수 있습니다. 이 패키지를 사용하면 JSON 데이터를 Map, List 등의 Dart 객체로 변환할 수 있습니다.

2. JSON 데이터 파싱 방법

JSON 데이터를 파싱하는 데는 두 가지 주요 방법이 있습니다:

• 직접 파싱: JSON 데이터를 Map 객체로 변환한 후, 직접 Dart 객체로 매핑합니다.
• 자동 생성된 코드 사용: json_serializable 패키지를 사용하여 JSON 파싱 코드를 자동으로 생성합니다.

방법 1: 직접 파싱

먼저, 직접 JSON 데이터를 파싱하는 방법을 살펴보겠습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }

  Future<Post> fetchPost() async {
    final response = await DefaultAssetBundle.of(context).loadString('assets/sample.json');

    if (response.isNotEmpty) {
      return Post.fromJson(json.decode(response));
    } else {
      throw Exception('Failed to load post');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('JSON Parsing')),
      body: Center(
        child: FutureBuilder<Post>(
          future: post,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Title: ${snapshot.data!.title}');
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }

            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

 

위 코드는 Post 클래스를 정의하고, Post.fromJson 팩토리 생성자를 사용하여 JSON 데이터를 Dart 객체로 변환합니다. JSON 데이터는 assets/sample.json 파일에서 로드됩니다.

 

 

방법 2: 자동 생성된 코드 사용

json_serializable 패키지를 사용하여 JSON 파싱 코드를 자동으로 생성하는 방법을 살펴보겠습니다.

먼저, pubspec.yaml 파일에 필요한 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.5.0

dev_dependencies:
  build_runner: ^2.1.7
  json_serializable: ^6.2.0

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

 

Step 1: 모델 클래스 정의

모델 클래스를 정의하고, JSON 직렬화를 위한 어노테이션을 추가합니다.

import 'package:json_annotation/json_annotation.dart';

part 'post.g.dart';

@JsonSerializable()
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
  Map<String, dynamic> toJson() => _$PostToJson(this);
}

 

 

Step 2: 코드 생성

다음 명령어를 실행하여 JSON 직렬화 코드를 생성합니다.

flutter pub run build_runner build

 

이 명령어는 post.g.dart 파일을 생성하여 JSON 직렬화 및 역직렬화 코드를 자동으로 생성합니다.

 

 

반응형

 

 

Step 3: JSON 데이터 파싱

이제 생성된 코드를 사용하여 JSON 데이터를 파싱할 수 있습니다.

import 'package:flutter/material.dart';
import 'dart:convert';
import 'post.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }

  Future<Post> fetchPost() async {
    final response = await DefaultAssetBundle.of(context).loadString('assets/sample.json');

    if (response.isNotEmpty) {
      return Post.fromJson(json.decode(response));
    } else {
      throw Exception('Failed to load post');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('JSON Parsing')),
      body: Center(
        child: FutureBuilder<Post>(
          future: post,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text('Title: ${snapshot.data!.title}');
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }

            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

 

위 코드는 json_serializable 패키지를 사용하여 JSON 데이터를 파싱하는 예제입니다. Post.fromJson 메서드는 JSON 데이터를 Dart 객체로 변환하며, Post.toJson 메서드는 Dart 객체를 JSON 데이터로 변환합니다.

결론

Flutter에서 JSON 데이터를 파싱하는 것은 외부 API와의 통신에서 매우 중요한 작업입니다. dart:convert 패키지를 사용하여 직접 JSON 데이터를 파싱할 수 있으며, json_serializable 패키지를 사용하여 JSON 파싱 코드를 자동으로 생성할 수도 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 효율적으로 JSON 데이터를 처리해보세요.