자바스크립트/⚪️ Vanilla
⚪️ [JS] JSON.stringify()
비니_
2025. 3. 25. 12:33
728x90
JSON.stringify() 란?
=> 객체나 배열을 JSON 형태의 문자열로 변환

리액트를 배우면서 개발 관점으로 기능을 만들어보다보니 데이터를 가져와서 쓸 때, JSON.stringify() 라는 것을 자꾸 쓰게 되었다.
그 전에는 데이터에 대해 생각을 안해서 쓰지 않아서 몰랐고, 최근에는 아무 생각 없이 그냥 배열로 만들어 주나 보다~ 했는데 갑자기 개념을 잡아야 겠다는 생각이 들어서 정리!
결론: 잘못알고 있었다..!

1. 객체를 JSON 문자열로 변환
const obj = { name: "Alice", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":25}' (문자열!)
2. 배열을 JSON 문자열로 변환
const arr = [1, 2, 3, 4];
const jsonString = JSON.stringify(arr);
console.log(jsonString); // '[1,2,3,4]' (문자열!)
JSON.stringify()가 필요한 이유
1. 로컬 스토리지 저장 (브라우저 저장소는 문자열만 저장 가능!)
const user = { id: 1, name: "Bob" };
localStorage.setItem("user", JSON.stringify(user)); // 객체 → 문자열로 저장
2. 서버로 데이터 보낼 때 (JSON 포맷으로 변환)
fetch("https://api.example.com", {
method: "POST",
body: JSON.stringify({ username: "test", password: "1234" }),
headers: { "Content-Type": "application/json" }
});
🟦 [React] 지역변수를 전역변수로 만들고 싶을 때
해당 함수 내에서 뿌려주고 있는 result를 전역에서 쓰고 싶은데 어떻게 해야되지? => useState 나 useRef 사용! ✔ useState : 렌더링하면서 UI 반영✔ useRef : 렌더링할 필요 없이 전역에서만 참조 (UI 미
dazzle-bini.tistory.com
728x90