37일차 리액트 숙련주차 (JSON)

seul-bean·2023년 9월 30일
0

Today I learned

목록 보기
33/40
post-thumbnail

🍎 JSON이란?

JavaScript Object Notation
자바스크립트 객체 문법에 토대를 둔, 문자 기반의 데이터 교환 형식

일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다.
자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다.
작은 따옴표('')가 아닌 큰 따옴표("")만 허용된다.

🌳 메서드

Json → 문자열 형태 → 서버-클라이언트 간 데이터 전송 시 사용

두 경우를 위해 파싱(parsing) 과정이 필요
1. JS 객체를 JSON 형태로 전송
2. JSON 형태를 JS 객체 형태로 사용
JS object → Json, Json → JS object


stringify()
자바스크립트 객체 → JSON 문자열 변환.
네트워크를 통해 객체를 JSON 문자열로 변환할 때 주로 사용.

console.log(JSON.stringify({x: 5, y: 6}));
// {"x":5,"y":6}

// 문자열, 숫자, 불리언
console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// [3,"false",false]

// 숫자, undefined, 함수, 심볼
console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')]}));
// {"x":[10,null,null,null]}

// Date
console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// "2006-01-02T15:04:05.000Z"

parse()
JSON 문자열 → 자바스크립트 객체 변환.
네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 JS 객체로 변환할 때 사용. (서버 → client)

const json = `{"result":true, "count":42}`;
const obj = JSON.parse(json);

console.log(obj.count);
// 42

console.log(obj.result);
// true
profile
안녕하세요 성장하는 새싹 프론트엔드 개발자 입니다🌱

0개의 댓글