[Flutter] JSON, jsonEncode(toJson), jsonDecode(fromJson)

JSON

 

JSON이란?

• JavaScript의 객체 표기 방식 기반
• Flutter에서 서버와 데이터를 주고 받을 때 가장 많이 사용되는 데이터 형식

 

JSON 사용이유

• 가볍고 빠르기 때문에 서버와 통신 시 부담이 적음.
• 언어의 독립성으로 인해 Python, Dart, JavaScript 등 다양한 언어에서 사용 가능
• 키-값 쌍 구조로 가독성이 높음.
• 많은 REST API들이 JSON 형식을 기본으로 제공

 

JSON 예시

{
  "name" : "flutter"
  "age" : 10
}

• 중괄호 안에 key-value 쌍
• key는 반드시 문자열
• value에는 다양한 타입이 들어갈 수 있다.
  • String, Number(int, double), Boolean(bool), Array(대괄호), Object(중괄호), null

---

JSON 데이터 변환 형식

 

서버와의 데이터 통신 과정

• 직렬화(Serialization)
  • 서버에 데이터를 전송할 때 Dart 객체를 JSON 형식으로 변환하는 과정
  • Dart 객체 -> toJson() -> Map -> jsonEncode() -> JSON 문자열
  • toJson() 메서드와 jsonEncode()를 함께 사용
    • jsonEncode()는 Map 또는 List를 받아야 함.
• 역직렬화(Deserialization)
  • 서버에서 받은 JSON 데이터를 Dart 객체로 변환하는 과정
  • JSON 문자열 -> jsonDecode() -> Map -> fromJson() -> Dart 객체
  • fromJson() 메서드와 jsonDecode()를 함께 사용
• 실제 서버와의 통신
  • 서버에 HTTP 요청(GET, POST 등등)
  • JSON 데이터 역직렬화 / 직렬화
  • 응답 데이터 처리

 

예제

 

1. Dart 모델 클래스 생성

class User {
  final String name;
  final int age;
  final bool isDeveloper;

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

  // JSON → Dart 객체 (역직렬화)
  User.fromJson(Map<String, dynamic> json) 
    : this(
      name: json['name'],
      age: json['age'],
      isDeveloper: json['isDeveloper'],
    );
  

  // Dart 객체 → JSON (직렬화)
  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'age': age,
      'isDeveloper': isDeveloper,
    };
  }
}

 

2. 직렬화(Dart 객체 -> Map -> JSON)

import 'dart:convert';

void main() {
  User user = User(name: '개발자', age: 10, isDeveloper: true); // User 객체

  // Dart 객체 → Map → JSON 문자열
  String jsonString = jsonEncode(user.toJson());

  print('직렬화된 JSON 문자열: $jsonString');
}

// 결과
직렬화된 JSON 문자열: {"name":"개발자","age":10,"isDeveloper":true}

 

3. 역직렬화(JSON -> Map -> Dart 객체)

import 'dart:convert';

void main() {
  String jsonString = '{"name":"개발자","age":10,"isDeveloper":true}';

  // JSON 문자열 → Map → Dart 객체
  User user = User.fromJson(jsonDecode(jsonString));

  print('이름: ${user.name}');
  print('나이: ${user.age}');
  print('개발자 여부: ${user.isDeveloper}');
}

이름: 개발자
나이: 10
개발자 여부: true