투두리스트 로컬스토리지에 저장하기

기존의 투두리스트는 새로고침을 하면 모든 값이 초기화되어 버렸다. 새로고침을 해도 입력했던 정보들이 유지되는 방법을 찾다가, 로컬스토리지를 활용하는 방법을 찾았다.

 

 

 

 

 

Local Storage란?

 

서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소이다.

 

로컬스토리지는 만료기간이 존재하지 않으며, 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미한다.

 

또한 Local Storage에 저장한 자료는 페이지 프로토콜별로 구분하며, 도메인이 다른 경우에는 로컬스토리지 공유가 불가능하다

 

 

 

 

 

사용법

 

localStorage.setItem(key,value) : 값 추가

localStorage.getItem(key) : value값 가져오기

localStorage.removeItem(key) : 해당 로컬 스토리지 삭제

localStorage.clear() : 도메인 내의 localStorage 값 삭제

localStorage.length : 로컬 스토리지에 저장된 데이터 개수 반환

 

localStorage에는 문자열만 저장된다. 그래서 객체나 배열을 저장하려면 JSON.stringify()를 통해 문자열로 변환해서 저장해야 한다. 또한 가져올 때는 다시 파싱 해서 가져와야 한다. 그렇기에 문자열을 객체로 바꿔주는 JSON.parse()를 사용한다.

 

 

 

JSON.stringify()를 사용하지 않았을 때

 

 

 

JSON.stringify()를 사용했을 때

 

 

 

 

 

투두리스트에 적용

 

 

내가 만든 투두리스트는 모든 변경값이 Home.jsx의 todos State에 저장된다. 그래서 useEffet로 todos가 업데이트될 때마다 로컬스토리지에 추가되도록 했다.

 

 

 

 

 

문제점

todos State에 모든 데이터가 저장 및 수정 및 삭제되기기에, localStorage에 todos를 저장하고, 그 값을 받아와서 다시 todos의 초기값으로 제공해 주면 된다고 생각했다.

 

 

 

하지만 useEffect는 마운트 될 때 일단 한 번은 실행되기에 빈 배열이 localStorage에 저장된다. 그리고 그 값을 받아와서 todos에 저장하기에, 시작부터 빈 todoList가 생겼다

 

 

 

 

 

해결

그냥 useEffect는 로컬스토리지에 todos 추가할 때만 사용되게 하고, localTodos 변수 선언 이후 localStorage에 저장된 값을 따로 받아왔다. 그리고 localTodos를 todos의 초기값에 넣어주면 이전과 다르게 빈 값이 출력되지 않는다.

 

 

 

오류는 해결했지만 useEffect가 의도와 다르게 실행되는 부분 또한 최적화 관점에서 고민해봐야 할 것 같다.