JSON 읽는 법 배우기 (Dart의 Map과 차이점)

Angela Jeong·2023년 12월 29일
post-thumbnail

서버와 클라이언트가 서로 데이터를 주고 받으려면 데이터 형식을 일치시켜야 한다. 이때 등장하는 데이터 형식이 바로 JSON이다.
그런데.. JSON 파일 자체를 도대체 어떻게 읽어야 하는지 모르니 데이터 통신을 하기도 전에 어렵게 느껴지는 것 같다 ㅜㅜ

플러터로 데이터 통신을 해보기 전에 먼저! JSON에 대해 알아보자.


🌟 JSON (JavaScript Object Notation)

JSON이란 '자바 스크립트 객체 표기법'으로 데이터를 쉽게 교환, 저장하기 위한 텍스트 기반의 데이터 교환 표준이다.

그냥 데이터 형식 중 하나라고 보면 된다! JSON은 아래의 예시처럼 중괄호, 대괄호 즉, 객체와 배열로 이루어져있기 때문에 "이 데이터는 이러한 객체를 가지고 있고, 또 이 객체는 이러한 리스트를 가지고 있구나!" 라고 읽으면 된다.


1. 기본형태
{key: value}

2.여러 데이터를 나열하는 경우 쉼표 사용

{key1 : value, key2 : value2}

3.객체는 중괄호 { } 로 묶고, 배열은 대괄호 [ ]로 묶는다

{key1 : {inKey : inValue}, key2 : [arr1, arr2 arr3]}
{"판매자정보" : {"이름" : "남도일", "지역" : "서울"} , "판매품목" : ['사과','배','딸기']}

4.다양한 타입으로 사용이 가능하다.


// 숫자 (number)
{  k  :  1  }

//문자열 (string)
{  k  :  "str"  }

//불리언(boolean)
{  k  :  true  }

//객체(object)
{  k  :  {inKey : "value" }  }

//배열(array)
{  k  :  ["일", "이"]  }

//널(NULL)
{  k  :  null  

출처: https://codingazua.tistory.com/4


🌟 실제 Json 파일을 예시로 살펴보자

{
  "key1": {
    "inKey": "inValue"
  },
  "key2": ["arr1", "arr2", "arr3"]
}
  • 이 Json은 key1과 key2라는 객체를 가지고 있다.
  • key1는 또다른 객체를 값으로 가지고 있다 ⇒ "inKey"라는 키와 "inValue"라는 값을 가진 또 다른 객체
  • key2는 배열을 값으로 가지고 있다. ⇒ 배열 안에는 문자열 요소들이 있다.

[
{
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  }
]
  • 이 Json은 배열을 가지고 있다.
  • 배열 안에는 두 개의 객체가 있다.
  • 각 객체는 "userId", "id", "title” 세개의 키를 가지고 있다.

첫 번째 데이터는 객체 안에 또 다른 객체와 배열이 포함된 JSON 구조라면,
두 번째 예시는 배열 안에 여러 객체가 나열된 JSON 목록이다.



🤔 Map처럼 생겼는데 Map 타입이 아니라니!?

void main() {
  String jsonString = '{"name": "John", "age": 30}';
  Map<String, dynamic> decodedData = jsonDecode(jsonString);

  print(jsonString is Map); //false
  print(jsonString is String); //true  
  print(decodedData); // {name: John, age:30}
  print(decodedData is Map); //true
}

JSON은 Dart의 Map<String, dynamic>과 똑같이 생지만 Map 타입이 아닌 String 문자열이다. 이 String 문자열 안에 JSON 형식의 데이터가 포함되어 있는 것이다!

final json = {
  "name": "John",
  "email": "john@hmail.com"
};
void main () {
  print(json.runtimeType);
}
// 결과: Map<String, String>

0개의 댓글