JavaScript: 객체와 배열 저장하기! JSON.stringify와 JSON.parse 완벽 정리 📦

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊

24일차 포스팅에서는 브라우저의 저장소인 LocalStorage에 데이터를 저장하는 법을 배웠습니다. 새로고침을 해도 이름이 사라지지 않게 만드는 데 성공했었죠.

하지만 LocalStorage에는 치명적인 약점이 하나 있습니다. 바로 "문자열(String)만 저장할 수 있다"는 점입니다. 우리가 만든 투두 리스트나 복잡한 사용자 정보는 대부분 배열(Array)이나 객체(Object) 형태인데, 이걸 억지로 저장하면 데이터가 깨져버립니다.

오늘은 이 문제를 해결해 줄 마법의 열쇠, JSON 변환에 대해 알아보겠습니다. 이 기술을 익히면 어떤 복잡한 데이터라도 LocalStorage에 안전하게 보관할 수 있습니다.

1. 도입

만약 이사 갈 때 커다란 침대를 그대로 상자에 넣으려고 하면 들어가지 않겠죠? 침대를 상자에 넣으려면 나사를 풀어서 분해해야 합니다. 그리고 이사 간 집에 도착하면 다시 조립해서 사용해야 하죠.

프로그래밍 데이터도 마찬가지입니다. 배열이나 객체 같은 덩치 큰 데이터를 저장소(상자)에 넣으려면 문자열 형태로 분해해야 하고, 꺼낼 때는 다시 원상복구 시켜야 합니다. 이때 사용하는 도구가 바로 JSON.stringify와 JSON.parse입니다.

2. 개념 설명: 분해와 조립

JavaScript에는 데이터를 교환하기 위한 표준 포맷인 JSON이 있습니다.

A. JSON.stringify() : 짐 싸기 (분해)

• 역할: 객체나 배열을 문자열로 변환합니다.
• 언제 사용?: LocalStorage에 데이터를 저장(setItem)할 때.
• 비유: 침대를 분해해서 납작한 상자에 넣기 좋게 만드는 과정.

B. JSON.parse() : 짐 풀기 (조립)

• 역할: 문자열로 된 데이터를 다시 원래의 객체나 배열로 복원합니다.
• 언제 사용?: LocalStorage에서 데이터를 불러올(getItem) 때.
• 비유: 상자에서 꺼낸 부품을 조립해서 다시 누울 수 있는 침대로 만드는 과정.

---

3. 예시 코드: 배열을 저장하고 불러오기

투두 리스트처럼 여러 개의 할 일이 들어있는 배열을 저장하는 상황을 가정해 보겠습니다.

JavaScript

 

// 저장할 데이터 (배열)
const todoList = ["자바스크립트 공부", "운동하기", "책 읽기"];

// --- [나쁜 예] 그냥 저장하면 어떻게 될까요? ---
localStorage.setItem("badList", todoList);

const badResult = localStorage.getItem("badList");
console.log("그냥 저장한 결과:", badResult); 
// 출력: "자바스크립트 공부,운동하기,책 읽기" 
// (배열의 괄호[]가 사라지고 단순한 글자가 되어버렸습니다. 더 이상 배열이 아닙니다!)


// --- [좋은 예] JSON을 사용해 저장하기 ---

// 1. 저장하기 (JSON.stringify)
// 배열을 통째로 문자열 모양으로 바꿉니다. '["...","..."]' 형태가 됩니다.
const jsonString = JSON.stringify(todoList);
localStorage.setItem("goodList", jsonString);

// 2. 불러오기 (JSON.parse)
const storedData = localStorage.getItem("goodList"); // 아직은 문자열 상태
const parsedList = JSON.parse(storedData); // 다시 진짜 배열로 변환!

console.log("JSON 변환 결과:", parsedList);
// 출력: ["자바스크립트 공부", "운동하기", "책 읽기"] (완벽한 배열입니다)

// 진짜 배열인지 확인해볼까요?
console.log("첫 번째 할 일:", parsedList[0]); // "자바스크립트 공부"
console.log("데이터 타입:", typeof parsedList); // "object" (배열도 객체의 일종)

 

결과 확인 (브라우저 콘솔):

• 그냥 저장했을 때는 badResult[0]을 하면 배열의 첫 요소가 아니라 글자 "자"가 나옵니다. 데이터가 망가진 것이죠.
• JSON을 사용했을 때는 parsedList[0]이 "자바스크립트 공부"로 정확하게 나옵니다. 데이터 구조가 유지되었습니다.

4. 코드 설명: 데이터의 변신 과정

1. 원본: ["A", "B"] (JavaScript 배열)
   • 이 상태로는 LocalStorage에 못 들어갑니다.
2. JSON.stringify(): '["A", "B"]' (문자열)
   • 겉모습은 배열 같지만, 양옆에 따옴표가 붙은 긴 문자열이 되었습니다. 이제 LocalStorage에 저장이 가능합니다.
3. localStorage.getItem(): '["A", "B"]' (문자열)
   • 꺼내왔지만 여전히 문자열입니다. 이대로는 push나 인덱스 접근을 할 수 없습니다.
4. JSON.parse(): ["A", "B"] (JavaScript 배열)
   • 문자열 껍질을 벗기고 다시 살아있는 배열로 되돌렸습니다. 이제 코딩에서 자유롭게 사용할 수 있습니다.

5. 마무리

오늘은 25일차 포스팅으로, 복잡한 데이터를 저장소에 보관하기 위한 필수 기술인 JSON.stringify와 JSON.parse에 대해 배웠습니다.

• 저장할 땐: Stringify (문자열로 만들기)
• 꺼낼 땐: Parse (원래대로 돌리기)

이 공식만 기억하면 됩니다!

자, 이제 모든 준비는 끝났습니다. 다음 26일차 포스팅에서는 우리가 23일차에 만들었던 '인터랙티브 투두 리스트'에 오늘 배운 LocalStorage 기능을 합체시킬 것입니다. 새로고침 해도 절대 지워지지 않는 나만의 완벽한 스케줄러를 완성해 봅시다!

오늘도 고생 많으셨습니다. 다음 시간에 만나요! 👋