JSON.stringify(), JSON.parse()

zzwwoonn·2022년 4월 19일

Java Script

목록 보기

18/29

개요

ToDo List를 만드는 과정에서 todo list 배열 - 정보(Data)를 localStorage에다가 저장해두기로 했다. 바닐라 JS를 공부하기 위한 목적이므로 DB를 쓰기에는.. 무리가 있다. localStorage로도 충분하다.

하지만 문제가 생겼다. localStorage에는 배열을 저장할 수 없다. localStorage에는 string값(문자열)만을 저장할 수 있다. 해결책은 의외로 간단하다. 배열을 string 값으로 바꿔주고 쓸 때는 다시 객체화 시켜서 꺼내 쓰면 된다.

const toDos = [];
// 새로운 할 일 목록이 생길때마다 toDos라는 배열에 push 하고 싶다.
// 웹이 새로 로드되면 배열은 항상 비어있는 상태로 시작한다.

function saveToDos(){
    // 이게 실행되는 시점에는 배열에 toDo가 저장되어 있다

    // localStorage.setItem("todos", toDos);
    // 이렇게 하면? todos: "1,2,3" 이렇게 나온다.

    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
    // 이렇게 하면? todos: "[\"1\",\"2\",\"3\"]" 이렇게 나온다. 
}

위 코드의 comment 를 보면 알 수 있듯이 처음 생각했던 대로

   localStorage.setItem("todos", toDos);

와 같이 localStorage에 저장하면 배열을 저장할 수 없으므로
todos: "1,2,3" 라는 결과가 나온다. 따라서 이를 JSON.stringify 라는 함수를 통해 string(문자열) 값으로 바꿔준 후 저장한다.

JSON

JSON (JavaScript Object Notation)

구조화된 데이터를 나타내기 위한 텍스트 기반 데이터 형식
JavaScript에서 객체를 만들 때 사용함

XML을 대체하여 데이터 전송에 많이 쓰인다. 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링할 수 있는 라이브러리를 제공한다.

JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공한다.

JSON.stringify()

자바스크립트 파일 내에서 특정한 데이터를 json의 형태(포멧, 문법)로 문자 데이터화 시켜주는 메소드
JSON은 자바스크립트의 전체 영역에서 어디서든지 사용 가능한 전역 객체이다.
JSON 객체에서 stringfy라는 메소드를 실행하면 원래의 객체 데이터가 json화 된다.

const user = {
  name : "zwon",
  city : "Busan",
  job : "student"
}
const str = JSON.stringify(user); 
// 객체에서 문자로 데이터 변환

console.log('str', str); // str {"name":"zwon","city":"Busan","job":"student"}
console.log(typeof str); // string

로컬 스토리지에는 배열의 모습을 한 문자열(String)로 todo list가 저장되어 있다. 이를 꺼내오기 위해 다시 객체화 시켜주어야 한다.

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
  // 로컬 스토리지가 비어있지 않을 때
  
    const parsedToDos = JSON.parse(savedToDos);
  	// savedToDos는 String이고 변환 후 parsedToDos는 객체이다.

    toDos = parsedToDos;
    //지금 로컬스토리지에 있는거 값 저장해두고(toDos 배열에)

    parsedToDos.forEach(paintToDo);
    //parsedToDos 가 array 라서 foreach 가 가능(아이템 별로 순회)

    // parsedToDos.forEach(sayHello);  이거랑
    // parsedToDos.forEach((items) 
    // => console.log(`this is turn of ${item})); 
    // 이거랑 똑같다 <arrow function>
}

JSON.parse()

자바스크립트에서 활용할 수 있는 데이터로 변환시켜주는 메소드
JSON 객체에서 parse라는 메소드를 실행하면 원래의 문자 데이터가 자바스크립트에서 가공하여 사용할 수 있는 데이터로 변환된다.

const obj = JSON.parse(str) // 문자에서 객체로 데이터 변환
console.log('obj', obj); // obj {name:"zwon",city:"Busan",job:"student"}
console.log(typeof obj); // object

출력 결과를 살펴보면 JavaScript 객체와 JSON 문자열 사이에 차이점을 찾을 수 있다. JSON 문자열에서는 키(key)가 쌍따옴표로 감싸져 있지만, JavaScript 객체에서는 쌍따옴표가 없다.

정리

localStorage.setItem('obj', JSON.stringify({name: 'jooing', id: '1'})) 
JSON.parse(localStorage.getItem('obj')) 
// {name : 'jooing', id: '1'} 

localStorage.setItem('nums', JSON.stringify([1, 2, 3])) 
JSON.parse(localStorage.getItem('nums')) 
// [1, 2, 3]