[Javascript] JSON.parse(), JSON.stringify()가 무엇인지와 왜 쓰는지

문제 상황 & 문제 인식

여느 때와 다름없이 회사의 업무를 보고 있었다. 특정 api에 axios 요청을 한 후, react-query를 이용하여 받아온 res 값을 파싱하여 화면에 띄워주는 일을 하고 있었다.
요청을 정상적으로 보내고 응답도 제대로 와서 점 표기법(Dot notation)을 사용하여 데이터 값에 접근을 하려고 하였다.
그런데 내가 원하는 값으로의 접근이 잘 안되었다.

getSecurityDataRefetch()를 수행하고, 
받아온 결과값을 이용하여 pageCount를 업데이트
해주는 로직이다.

Nan에 해당하는 부분에 원래는 NaN이 아닌
res.data.totalCount라는 숫자가 들어가야 하는데
나의 의도와는 다르게 NaN이 출력되는 모습이다.

원인 분석

처음에는 데이터가 제대로 안 오는 줄 알아서 Postman을 통해 API 응답 데이터를 확인해 보았다.

Postman에서도 확인을 해보니 응답 데이터가 객체 안에 data라는 key를 가진 채로 잘 응답이 오는 것을 확인할 수 있었다.

그렇다면 응답 데이터를 Dot Notation으로 접근을 잘못하고 있다는 것인데, 혹시나 해서 response 데이터에 타입을 확인해보았다.

콘솔로 response를 찍어보고, 그에 대한 type도 확인해보았다.


그냥 콘솔로 봤을 때는 데이터가 잘 오는 것을 확인할 수 있으나, 역시 응답 데이터의 type이 string으로 오는 것을 확인할 수 있었다.
string 형태의 데이터에 Dot Notation으로 접근을 하니 당연하게도 내가 원하는 데이터를 파싱할 수 없었던 것이다.

해결 방안

해결 방법은 간단하게 response 데이터를 JSON 객체 형태로 바꿔준 후,
바뀐 JSON 객체에다가 Dot Notation으로 데이터에 접근하면 된다.

JSON.parse() 함수를 사용하여 response 데이터를 JSON 객체로 만든 후, Dot Notation을 사용하였더니

다음과 같이 내가 원했던 데이터가 정상적으로 출력되는 것을 확인할 수 있었다.

이 문제의 원인은 내가 데이터의 형태에 대한 이해가 부족했기 때문이다.
서버와 적절하게 데이터를 주고 받기 위해서 JSON.parse()와 JSON.stringify() 함수가 매우매우 자주 쓰인다.
다음에도 이런 실수를 하는 것을 방지하기 위해 JSON.parse()와 JSON.stringify()를 정리해보고자 한다.

JSON.parse(), JSON.stringify

Q. 이 함수들은 무엇이며 왜 쓰는 것일까?
A. JSON.parse()와 JSON.stringify()는 JavaScript에서 JSON 형식의 데이터를 다룰 때 사용되는 메서드다.

JSON.parse()

JSON 문자열을 JavaScript 객체로 변환한다.

• JSON.parse() 메서드는 JSON 형식의 문자열을 파싱하여 JavaScript 객체로 변환한다.
  이는 서버에서 전송된 JSON 데이터를 JavaScript에서 사용하기 위해 필요한 작업이다.
  JSON.parse()를 사용하여 JSON 문자열을 파싱하면 해당 데이터를 JavaScript에서 손쉽게 다룰 수 있다.

// JSON.parse() 예제코드
const jsonString = '{"name":"John","age":30}';
const data = JSON.parse(jsonString);
console.log(data.name); // "John"
console.log(data.age); // 30

JSON.stringify()

JavaScript 객체를 JSON 형식의 문자열로 변환한다.

• JSON.stringify() 메서드는 JavaScript 객체를 JSON 형식의 문자열로 변환한다.
  이는 JavaScript 객체를 서버로 전송하거나 로컬 저장소에 저장하기 위해 필요한 작업이다. JSON.stringify()를 사용하여
  JavaScript 객체를 JSON 문자열로 변환하면 데이터를 일관된 형식으로 표현하고 전송할 수 있다.

const data = {
  name: "John",
  age: 30
};
const jsonString = JSON.stringify(data); // jsonString: '{"name":"John","age":30}'
// 이제 jsonString을 서버로 전송 및 로컬 저장소에 값을 저장 할 수 있다.
localStorage.setItem("userData", jsonString);

요약

요약하자면 자바스크립트에서 서버로 데이터를 보내고자 할 때는 주로 JSON.stringify() 함수를 이용하여 JSON 객체를 문자열로 변환하여 전송하고, 서버에서 데이터를 받을 때에도 문자열로 받는 경우가 일반적이다.

서버에서 전송된 문자열 형태의 데이터를 클라이언트에서 사용하기 위해서는 해당 문자열을 파싱하여 javascript 객체로 변환해야 하는데, 이 기능을 가능하게 해주는 것이 JSON.parse() 함수이다.