[React] Day07 - LocalStorage로 Todo 데이터 저장

오늘 학습 내용

Todo 데이터를 브라우저 LocalStorage에 저장하도록 수정했다.

이제 새로고침을 해도 Todo 데이터가 사라지지 않는다.

---

LocalStorage란?

브라우저에 데이터를 저장할 수 있는 웹 스토리지 기능이다.

특징:

브라우저에 데이터 저장
새로고침해도 유지됨
문자열 형태로 저장됨

---

Todo 저장 방식

Todo 상태가 변경될 때마다
LocalStorage에 데이터를 저장하도록 구현했다.

Todo 추가 시 저장

localStorage.setItem("todos", JSON.stringify(newTodos));

Todo 삭제 시 저장

localStorage.setItem("todos", JSON.stringify(newTodos));

Todo 완료 상태 변경 시 저장

localStorage.setItem("todos", JSON.stringify(newTodos));

---

LocalStorage에서 데이터 불러오기

앱이 시작될 때 저장된 Todo를 불러온다.

const savedTodos = JSON.parse(localStorage.getItem("todos")) || [];

설명:

localStorage → 문자열 저장
JSON.parse → 문자열을 배열/객체로 변환

---

Todo 전체 삭제

clearTodos: () => {
  localStorage.removeItem("todos");
  set({ todos: [] });
}

LocalStorage에 저장된 데이터도 함께 삭제 된다.

---

결과물

---

오늘 배운 개념

JSON.stringift()

객체 / 배열 -> 문자열 변환

JSON.parse()

문자열 -> 객체 / 배열 변환

LocalStorage는 문자열만 저장 가능하기 때문에
JSON 변환 과정이 필요하다.

---

느낀점

처음에는 Todo가 새로고침하면 사라졌지만
LocalStorage를 이용해 데이터가 유지되는 것을 보니
작은 기능이지만 앱이 실제 서비스처럼 느껴졌다.

상태 관리와 데이터 저장 방식에 대해
조금 더 이해하게 된 하루였다.

---

📎 Project Link

🐙 GitHub Repository
👉 https://github.com/wjdtor2-design/Frontend-portfolio
📝 Velog Study Log