JSON.stringify() 사용법

기본 문법

JSON.stringify(value[, replacer[, space]])

• value: JSON으로 변환할 값 (객체, 배열 등)
• replacer (선택): JSON으로 변환하는 동안 특정 속성을 필터링할 수 있는 함수 또는 배열
• space (선택): JSON 문자열 출력 시 가독성을 위해 들여쓰기를 적용할 수 있는 숫자 또는 문자열

예시: 기본 사용법

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj);
console.log(jsonString);

출력:

{"name":"John","age":30,"city":"New York"}

위 예시에서 객체 obj가 JSON 문자열로 변환되었습니다. 이는 서버에 데이터를 전송하거나 로컬 스토리지에 저장할 때 유용합니다.

---

옵션 1: replacer

replacer는 JSON 변환 시 특정 속성을 필터링하거나 수정할 수 있는 방법을 제공합니다. 이 인수는 함수 또는 배열일 수 있습니다.

1. 배열로 필터링

객체에서 특정 속성만 선택하여 변환하고 싶을 때 replacer 배열을 사용할 수 있습니다.

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj, ["name", "city"]);
console.log(jsonString);

출력:

{"name":"John","city":"New York"}

위 예시에서 age 속성은 제외되고, name과 city만 JSON으로 변환되었습니다.

2. 함수로 필터링 및 수정

replacer를 함수로 사용하면 각 속성에 대해 커스텀 로직을 적용할 수 있습니다.

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj, (key, value) => {
  if (key === "age") {
    return undefined; // age 필드를 제외
  }
  return value; // 나머지는 그대로 반환
});
console.log(jsonString);

출력:

{"name":"John","city":"New York"}

위 코드에서 replacer 함수는 age 속성을 제외하고 나머지 속성은 그대로 변환합니다.

---

## 옵션 2: space `space` 인수를 사용하면 JSON 출력 시 가독성을 높이기 위해 들여쓰기를 적용할 수 있습니다. 이를 통해 JSON 문자열을 더 쉽게 읽을 수 있습니다.

1. 숫자로 들여쓰기

숫자를 사용하면 들여쓰기 간격을 설정할 수 있습니다.

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj, null, 4); // 4칸 들여쓰기
console.log(jsonString);

출력:

{
    "name": "John",
    "age": 30,
    "city": "New York"
}

2. 문자열로 들여쓰기

space 인수에 문자열을 전달하면 해당 문자열로 들여쓰기가 적용됩니다.

const obj = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(obj, null, "--"); // '--' 문자열로 들여쓰기
console.log(jsonString);

출력:

{
--"name": "John",
--"age": 30,
--"city": "New York"
}

---

JSON.stringify()의 주의사항

1. 순환 참조 객체

JSON.stringify()는 순환 참조가 있는 객체를 변환할 수 없습니다. 순환 참조란 객체의 속성 중 하나가 자기 자신을 참조하는 구조를 말합니다.

let obj = {};
obj.a = obj;

JSON.stringify(obj); // 오류 발생: "TypeError: Converting circular structure to JSON"

이 경우 순환 참조를 제거하거나, replacer를 사용하여 순환 참조를 처리해야 합니다.

2. undefined, 함수, Symbol

undefined, 함수, Symbol은 JSON 데이터 형식에서 지원되지 않기 때문에 변환 과정에서 무시되거나 null로 처리됩니다.

const obj = {
  name: "John",
  age: undefined, // 무시됨
  greet: function() { return "Hello"; }, // 무시됨
  symbol: Symbol("id") // 무시됨
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);

출력:

{"name":"John"}

undefined, 함수, Symbol은 JSON에 포함되지 않으며, 유효한 데이터 형식만 변환됩니다.

---

결론

JSON.stringify()는 자바스크립트 객체를 JSON 문자열로 변환할 때 매우 유용한 메서드입니다. 기본 사용법뿐만 아니라, replacer와 space 옵션을 통해 JSON 변환 과정을 커스터마이즈할 수 있습니다. 하지만 순환 참조나 지원되지 않는 데이터 타입에 대한 예외 처리를 항상 염두에 두어야 합니다. 이 메서드는 데이터 통신이나 파일 저장 시 매우 중요한 역할을 하므로, 올바르게 이해하고 사용하는 것이 중요합니다.