[flutter] 플러터에서 json 사용하기

플러터에서 json을 사용하기 위해서는 아래와 같이 4가지의 과정을 이해해야한다.

1. 자료형에 대한 이해
2. json 스트링을 Map<String, dynamic> 자료형으로 변환
3. Map<String, dynamic> 자료형을 객체로 변환
4. 객체를 json 스트링으로 변환.

1. 자료형에 대한 이해

• JSON은 데이터 포맷일 뿐이며, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현방법임.
• JSON 데이터는 텍스트 데이터이다. 텍스트 데이터는 String 형으로 들어오게 됨.
• 또한 JSON은 Javascript의 객체를 만들 때 사용하는 표현식을 의미하며, Javascript의 객체와 같이 Key-value 형태로 이루어져있다.

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

• 또한 Flutter의 Map<String, dynamic> 자료형을 알아야한다.
  웬만해서는 텍스트 데이터인 JSON은 key값으로 String 타입의 키 값이 들어온다.
• dynamic은 데이터 타입이 정적으로 추론되지 않는 동적 타입을 나타내는 특별한 키워드로, 코드 실행시점에타입이 결정된다.
  - 즉, 어떠한 종류의 데이터든 저장할 수 있고, 실행 시점에 해당 데이터의 타입을 확인하여 작업을 수행하기 때문에 동적이고 유연한 타입이기에 key-value 형태의 value가 어떠한 값이 들어와도 받을 수 있다.

! 이 자료형들로 보게되면, 텍스트 데이터인 JSON을 Map<String, dynamic>을 통해 다루고, 이 다뤄진 데이터를 객체로 만들면 되는 것이다. !

JSON 값을 Map<String, dynamic> 자료형으로 변환

String jsonString = '''

{

"name" : "hallur",

"age" : 27,

"job" : "DJ",

"is_man" : true

}

''';

JSON 데이터를 우선적으로 이렇게 String화 시킨다. 보기에 형태는 Key-value로 이루어져있는 것을 알 수 있다.

이러한 String값을 jsonDecode() 라는 메서드를 통해 Map형태로 파싱한다.

Map<String, dynamic> jsonData = jsonDecode(jsonString);

print(jsonData['name']); // hallur 출력

print(jsonData['age']); // 27 출력

print(jsonData['job']); // DJ 출력

print(jsonData['is_man']); // true 출력

jsonDecode를 통해 Map<String, dynamic> 형태로 파싱했다. 실제로 코드를 실행해보면 아래와 위와같은 출력값을 기대할 수 있다.

Map<String, dynamic> 자료형을 객체로 변환

JSON 스트링을 JSON 자료형으로 변환켰으니, 이젠 객체로 변환할 차례이다.

이 과정을 수행하기 위해선 먼저 json데이터와 매칭되는 객체를 정의해줘야함.

class User {
	String name;
    int age;
    String job;
    bool isMan;
    
    User({
    	this.name,
        this.age,
        this.job,
        this.isMan
     });

}

이렇게 정의하고 나면 클래스 내부의 팩토리 함수를 이용하여 fromJson이라는 함수를 정의해주어야 합니다.

[출처] : https://totally-developer.tistory.com/121
[출처] : https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
[출처] : https://bebesoft.tistory.com/11