JSON.parse()와 JSON.stringify()인데... todo list 예시를 곁들인

바닐라JS로 투두리스트를 만들다 마주친 JSON 내장 객체

로컬스토리지에 todo를 저장하려다가 로컬 스토리지는 오직 text만을(string) 저장한다는 것을 알게됐다.

 

가령 내가 할 일로

• ts 공부
• js 복습
• 병원 갔다오기

를 입력해 로컬스토리지에 setItem으로 저장하면

이런 식으로 텍스트로 저장 되는 것이다.

 

todo는 배열로 저장되어 아이템 하나 하나(ts 공부 / js 복습 등)으로 관리돼야 한다.

그래서 JSON 내장 객체의 parse와 stringify를 사용해야했다.

 

잠깐 json을 살펴보자면,

JSON이란?

javascript object notation의 약자로서, 데이터를 문자열의 형태로 나타내기 위해 사용된다. js의 객체(object) 형식과 유사함.

{
	"name" : "윤삼삼",
	"jobs" : null,
	"family": { "father" : "윤삼이", "mother" : "홍삼이"  },
	"todos" : ["ts 공부", "js 복습", "병원 갔다오기"],
	"married" : false,
	"age" : 300
}

이런식으로 데이터를 표현할 수 있는게 JSON 포맷이다. 자바스크립트랑 비슷하지만 차이점은 있다. (지원하지 않는 타입과 문법 존재)

가령 객체, 배열, 숫자, string, boolean, null 과 같은 데이터들을 넣을 수 있지만, NaN과 Infinity, undefined는 지원하지 않는다(mdn 참고)

stringfy와 parse와 같은 메서드를 제외하면 흥미로운 기능은 없다고 한다_mdn 피셜 내 의견 아님

JSON 내장 객체

자스에선 JSON 포맷의 데이터를 간편하게 다룰 수 있도록 JSON 객체를 내장하고 있다. JSON 객체는 JS 객체와 JSON 문자여 간의 상호 변환을 돕는 두 개의 메서드를 제공한다.

JSON.parse() : JSON 문자열을 JavaScript 객체로 변환

parse() 메소드는 JSON 문자열을 JS 객체로 변환할 때 사용한다. JSON 문자열을 인자로 받고 결과값으로 JavaScript 객체를 반환한다.

예를 들어, JSON 문자열을 스트링값으로 str 이라는 변수에 저장한다면,

const str = `{
	"name" : "윤삼삼",
	"jobs" : null,
	"family": { "father" : "윤삼이", "mother" : "홍삼이"  },
	"todos" : ["ts 공부", "js 복습", "병원 갔다오기"],
	"married" : false,
	"age" : 300
}`;

그 다음 JSON.parse() 메서드에 str을 인자로 넘겨 호출한다.

const obj = JSON.parse(str);

obj에 저장된 값을 출력하면 JSON 문자열 형태의 데이터가 JS 객체의 형태로 변환되어 출력되는 것을 확인할 수 있다. typeof로 obj의 타입이 객체라는 것도 확인 가능하다

console.log(obj);
console.log(typeof obj);

{
	name : "윤삼삼",
	jobs : null,
	family: { "father" : "윤삼이", "mother" : "홍삼이"  },
	todos : ["ts 공부", "js 복습", "병원 갔다오기"],
	married : false,
	age : 300
};
object;

JSON 문자열에서는 키(key)를 나타낼 때 반드시 쌍따옴표로 감싸줘야 하는 반면에, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없다.

이렇게 외부에서 문자열의 형태로 주어진 데이터를 해당 언어로 다루기 용이하도록 내장 데이터 타입으로 변환하는 과정을 CS에서는 역직렬화라고 부른다. 대표적인 사례로 클라이언트에서 JSON 포맷으로 데이터를 보내면, 서버에서 우선 JavaScript 객체로 변환한 후에 데이터를 처리하게 되는 것을 들 수 있다.

 

그래서 투두리스트에서 어떻게 쓰였냐하면, 아래와 같다

todos 키로 로컬 스토리지에 저장된 savedToDos(그래서 과거형) 불러오기 위해

로컬 스토리지에 string으로 저장된 할일 아이템들을 js 객체로 다시 변환하기 위해 썼다.

화면에 보여줄 paintToDo에 쓰이기 위해서다.

JSON.stringify() : JS 객체를 JSON 문자열로 변환

역으로 JS 객체를 JSON 문자열로 변환할 때는 JSON 객체의 stringify() 메서드를 사용한다. stringify() 메소드는 JS 객체를 인자로 받고 JSON 문자열을 반환한다.

 

이건 parse()와 반대 메서드 이므로 투두리스트 플젝에서 내가 쓴 예시로 보여주고 끝내겠음.

간단간단... 

 

여담으로 바닐라 자스로 투두리스트를 만들다가 생각보다 만들어야하는 함수들이 많았고,

특정 item을 삭제할 때는 그 item을 삭제하는 것이 아니라, 해당 item을 제외한 새로운 item 목록을 렌더하는 것이라는 것을 깨닫는 과정이 생경한 느낌이었음.