어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

⚪️ [JS] JSON.stringify() 본문

자바스크립트/⚪️ 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
Comments