JSON.stringfy, Tree UI

JSON.stringfy

JSON.stringfy 함수는 input 값을 JSON 형식으로 변환해준다.

주의해야 할 점은 undefined와 function은 JSON 으로 생략되거나 null로 변환된다.

---

JSON.stringify( value ([, replacer [, space] ])

JSON.stringify() 함수는 JavaScript 값이나 객체를 JSON 문자열로 변환해주는데 선택적으로, [replacer]를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함된다.

문자열화 동작 방식을 변경하는 함수나 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 String 과 Number 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

[ JSON.stringfy mdn ] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

---

JSON 구조에서 재귀 함수 사용

• JSON 구조에서는 Tree 구조를 가지고 있기 때문에, 재귀 함수를 사용할 수 있다.
• JSON.stringfy와 JSON.parse 를 사용해서 자바스크립트의 값과 JSON을 활용할 수 있다.
• JSON 에서 재귀 호출을 어떻게 사용해야 하는 지 파악 할 수 있어야 된다.

JSON 을 사용하는 이유

JSON(JavaScript Object Notation)은 데이터들의 교환을 위해 만들어진 포맷이다.

아래와 같은 객체 1개가 있다고 가정했을 때, 이 객체의 내용을 네트워크를 통해 다른 프로그램에게 어떻게 전달할 수 있을 까?

let userInfo = {
  id: 'guest07',
  age: 39,
  address: 'seoul',
  tel: '01012345678',
  birth: '19830101'
};

객체라는 것을 전송가능한 상태를 살펴보면, 수신자와 발신자가 똑같은 프로그램을 사용하거나, 문자열과 같이 범용적으로 읽을 수 있는 데이터여야만 가능할 것이다.

위의 객체를 사용하기 위해 userInfo.toString( ), String(userInfo)를 해봐도 [object Object]라는 결과를 리턴하게 된다.

객체는 타입 변환을 사용해서 String으로 변환할 경우 객체의 내용을 포함하지 않는다.

JSON.stringfy( )

그래서 객체를 문자열로 바꾸기 위해서 JSON.stringfy( ) 를 사용해야 된다.

let userInfoToJSON = JSON.stringify(userInfo);

console.log(userInfoToJSON);
// 아래와 같이 객체를 문자열로 변환한 결과를 확인할 수 있다.
"{"id":"guest07","age":39,"address":"seoul","tel":"01012345678","birth":"19830101"}"

---

위에서 객체 전체를 문자열로 감싼 결과를 확인할 수 있었다.
그러면 이제 문자열로 감싸서 변환받은 객체를 다른 사람에게 보낼 수 있을 거 같다.

문자열로 감싸진 객체를 어떻게하면 다시 객체로 변환할 수 있을까?

JSON.stringfy( ) 와 반대의 동작을 하는 메소드가 있다.

바로 JSON.parse( )이다.

JSON.parse( )

문자열로 감싸진 객체를 다시 객체로 변환하는 작업을 쉽게 할 수 있다.
바로 JSON.parse( )를 사용해서 parse를 한다.

parse하는 과정을 역직렬화(deserialize)한다고 말한다.

let movieInfo = `{"name":"Inception","summary":["action","147minute"],"premiere":"2010.07.21","rating":"9.60","audience":"6 million"}`;
console.log(movieInfo); // "{"name":"Inception","summary":["action","147minute"],"premiere":"2010.07.21","rating":"9.60","audience":"6 million"}"

// 문자열로 감싸져있는 movieInfo 객체를 다시 객체로 변환
let movieObj = JSON.parse(movieInfo);
console.log(movieObj); // {name: "Inception", summary: Array(2), premiere: "2010.07.21", rating: "9.60", audience: "6 million"}
};

JSON 규칙

	자바스크립트 객체	JSON
key	키는 따옴표없이 쓸 수 있음	반드시 쌍따옴표("")를 붙여야 됨
문자열 값	문자열 값은 어떤 형태의 따옴표도 사용 가능("", '')	반드시 쌍따옴표("")를 붙여야 됨

JSON은 키:값 사이에는 공백이 있으면 안 된다.