정중식의 개발공부로그

JSON.stringify(),JSON.parse()

25 Aug 2022 | nodejs

개요

localStorage.setItem 혹은 localStorage.getItem 코드를 사용할때 JSON.stringify(),JSON.parse()를 자주 사용하는 모습을 볼 수 있다. 왜 사용하는걸까? 사용안하면 어떻게될까?

JSON.stringify() 짚고 넘어가기

const res = await axios.post(API_URL, userData);

localStorage.setItem('user', res.data);

위 코드를 사용하면 localStorage에는 이런식으로 저장된다.

key:user, value:[object object]

그럼 여기에 JSON.stringify()를 사용해주면? 

key:user,
value: "email": "wndtlr1024@gmail.com"
       "name": "정중식"
       "_id": "63078966bfb3a0725d3fd2e0"

이런식으로 문자열로 저장된다!

JSON.parse() 짚고 넘어가기

const user = (localStorage.getItem('user'));

console.log(user);
// {"_id":"63078966bfb3a0725d3fd2e0","name":"정중식","email":"asdasd@gmail.com",}

콘솔에 찍히는건 문자열이 찍힌다. 보통 localStorage.getItem을 사용하는건 객체로 사용하기위해서 인데, 이렇게 문자열로 찍히면 사용할 수 가없다. 그래서 JSON.parse()을 사용해주면,

const user = JSON.parse(localStorage.getItem('user'));
console.log(user);
// {_id: '63078966bfb3a0725d3fd2e0', name: '정중식', email: 'asdasd@gmail.com'}

이런식으로 객체로 찍히는것을 알 수 있다.

Related Posts