flutter & dart - dart:convert 파싱 (parsing)

overview.

1. JSON 문자열 데이터를 dart 코드로 변환할 수 있을까?
2. dart:convert 라이브러리
3. 전체 코드
4. http 통신을 해보자

 

1. JSON 문자열 데이터를 dart 코드로 변환할 수 있을까?

JSON 문자열을 Dart 객체로 변환하는 과정을 "JSON 파싱"이라고 합니다. JSON 파싱은 일반적으로 JSON 형식의 문자열 데이터를 특정 프로그래밍 언어의 데이터 구조나 객체로 변환하는 작업을 의미합니다.

 

Dart 객체로 변환하기 위해 우리는 dart:convert 라이브러리의 json.decode() 메서드를 사용합니다.

그럼 라이브러리가 있어야 겠네요!

 

2. dart:convert 라이브러리

앞서 설명했던것 처럼 라이브러리를 사용합시다.

import 'dart:convert';

 

json 문자열을 준비합니다.

  // 1단계 - 통신을 x 직접 json 형식의 데이터를 만들어 보자
  String jsonStr = '''
    {
      "userId" : 1 ,
      "id" : 100,
      "title" : "json 파싱이란?" ,
      "completed" : false
    }
  ''';

 

json 문자열을 파싱하여 먼저 Map 객체로 변환을 해야합니다.

  // 2단계 - JSON 문자열을 파싱하여 먼저 Map 객체로 변환을 해야한다.
  Map<String, dynamic> jsonStrToMap = json.decode(jsonStr); // Map 구조로 변환 해줌
  print(jsonStrToMap.runtimeType);
  print(jsonStrToMap);
  
 결과
 _Map<String, dynamic>
{userId: 1, id: 100, title: json 파싱이란?, completed: false}

 

Map 구조에 잘 들어왔군요!

Map 구조는 iterable 이라는 인터페이스를 구현하기 때문에 반복문을 많이 사용합니다. 확인용도로 사용해보죠.

그중 forEach 문을 사용해 봅시다.

  // Map --> 반복문 활용을 많이 한다.
  jsonStrToMap.forEach((key, value) {
    print("key - ${key}");
    print("value - ${value}");
  });
  
  결과
key - userId
value - 1
key - id
value - 100
key - title
value - json 파싱이란?
key - completed
value - false

 

이제 객체 지향 프로그램을 많이 활용하므로 객체를 만들어 봅시다.

생성자를 사용할 수도 있겠지만, 저희는 메서드를 사용해봅시다!!

// class Todo를 만든다.
class Todo {
  int userId;
  int id;
  String title;
  bool completed;

  // 강제성
  // 기본 생성자 1
  Todo(this.userId, this.id, this.title, this.completed);

  // 명명된 생성자 2 - Map 를 넣으면 Todo 오브젝트가 반환되는 코드를 작성
  // 이니셜 라이져 (변수를 초기화 해주는 문법)
  Todo.fromJson(Map<String, dynamic> json)
      : userId = json["userId"],
        id = json["id"],
        title = json["title"],
        completed = json["completed"];

  @override
  String toString() {
    return 'Todo{userId: $userId, id: $id, title: $title, completed: $completed}';
  }
}

 

이제 class 객체로만 만들어 주기만 하면 되겠네요!

  // 3단계 Map 형식의 데이터를 Object 타입으로 변경하자
  Todo myTodo1 = Todo.fromJson(jsonStrToMap);
  print(myTodo1);
  
  결과
  Todo{userId: 1, id: 100, title: json 파싱이란?, completed: false}

 

3. 전체 코드

import 'dart:convert';

void main() {
  // 1단계 - 통신을 x 직접 json 형식의 데이터를 만들어 보자
  String jsonStr = '''
    {
      "userId" : 1 ,
      "id" : 100,
      "title" : "json 파싱이란?" ,
      "completed" : false
    }
  ''';

  // 위 코드는 단지 형식이 있는 문자열입니다. (json)

  // 1단계 - 라이브러리가 필요하다.
  // 2단계 - JSON 문자열을 파싱하여 먼저 Map 객체로 변환을 해야한다.
  Map<String, dynamic> jsonStrToMap = json.decode(jsonStr); // Map 구조로 변환 해줌
  print(jsonStrToMap.runtimeType);
  print(jsonStrToMap);

  // Map --> 반복문 활용을 많이 한다. (확인용)
  jsonStrToMap.forEach((key, value) {
    print("key - ${key}");
    print("value - ${value}");
  });

  // 3단계 Map 형식의 데이터를 Object 타입으로 변경하자
  Todo myTodo1 = Todo.fromJson(jsonStrToMap);
  print(myTodo1);
}

// class Todo를 만든다.
class Todo {
  int userId;
  int id;
  String title;
  bool completed;

  // 강제성
  // 기본 생성자 1
  Todo(this.userId, this.id, this.title, this.completed);

  // 명명된 생성자 2 - Map 를 넣으면 Todo 오브젝트가 반환되는 코드를 작성
  // 이니셜 라이져 (변수를 초기화 해주는 문법)
  Todo.fromJson(Map<String, dynamic> json)
      : userId = json["userId"],
        id = json["id"],
        title = json["title"],
        completed = json["completed"];

  @override
  String toString() {
    return 'Todo{userId: $userId, id: $id, title: $title, completed: $completed}';
  }
}

 

4. http 통신을 해보자

앞의 http 통신과 이번에 배운 convert 를 활용하여 결합시켜보자

그리고 만약 키값이 없을 수도 있으니 ? 를 붙어 nullable 형식으로 바꾸자 오류가 날 수도 있다.

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

void main() async {
  var response = fetchTodo();
  // 1번 방법 - async , awiat
  var result = await response;
  print(result.runtimeType); // 동기 처리시 다트 개발자들이 만들어 놓은 Response 객체 타입이 나옴
  Map<String, dynamic> map = json.decode(result.body);

  Todo todo = Todo.parseJson(map);
  print(todo);
}

// 통신을 하는 함수 만들어 보기
Future<http.Response> fetchTodo() {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  var response = http.get(Uri.parse(url));
  return response;
}

// Todo 객체
class Todo {
  int? userId;
  int? id;
  String? title;
  bool? completed;

  Todo.parseJson(Map<String, dynamic> map)
      : userId = map["userId"],
        id = map["id"],
        title = map["title"],
        completed = map["completed"];

  @override
  String toString() {
    return 'Todo{userId: $userId, id: $id, title: $title, completed: $completed}';
  }
}