JSON.stringify()와 JSON.parse()

프로젝트를 구현하다가, local storage에 저장한 데이터를 사용하기 위해 가져오면서 JSON.parse()라는 문법을 사용했다. 정말 기본적인 지식임에도 불구하고 창피하지만 왜 사용했는지 설명하라고 하면 하지 못할것 같아서 정리했다.

 

내가 사용한 상황은 다음과 같다. 먼저, isLike 상태가 True인 값을 가공하여 local storage에 저장한다. 이후, local storage에서 likes라는 키 값으로 저장한 값을 불러온다.

...
const [products, setProducts] = useState(() => {
    // 앱 로드 시 localStorage에서 likes를 불러와 초기화
    const savedLikes = JSON.parse(localStorage.getItem("likes")) || [];
    return productData.map((product) => ({
      ...product,
      isLike: savedLikes.includes(product.id), // localStorage와 동기화
    }));
});

useEffect(() => {
    // 좋아요 상태가 true인 제품만 저장
    const likedIds = products
      .filter((product) => product.isLike)
      .map((product) => product.id);
    localStorage.setItem("likes", JSON.stringify(likedIds)); // localStorage에 저장
}, [products]);
...

 

이때, JSON.stringify()와 JSON.parse()라는 것을 왜 사용하지? 라는 의문이 들었다.

 

우선, localStorage는 문자열만 저장 및 반환한다. JSON.stringify()로 데이터를 문자열로 변환하여 저장 가능한 형태로 만들고, JSON.parse()를 사용하여 문자열을 객체 혹은 배열로 변환하여 사용하는 것이다.

 

실무에서도 장바구니 데이터를 저장하는 등, 민감하지 않은 정보를 local storage에 저장하는 경우 자주 사용될 개념이라고 생각한다.

const cartItems = [{ id: 1, name: "Item1", quantity: 2 }];
localStorage.setItem("cart", JSON.stringify(cartItems));

const storedCart = JSON.parse(localStorage.getItem("cart"));
console.log(storedCart); // [{ id: 1, name: "Item1", quantity: 2 }]