ToDoList에 localstorage 만들기

localstorage를 이용하면 된다는것은 알겠는데 

어떻게 사용해야 하는지 몰라 헤매던 끝에 방법을 찾았다..!

window로도 불러오고 별짓 다했는데 소용이 없었다. 물론 내가 잘못사용해서 그런걸지도...

npm문서를 읽어보다 react 전역라이브러리 중 하나인 recoil을 이용하기로 했다

 recoil- persist !! 

사용방법도 나 같은 초보자가 적용하기에 엄청 쉽다..!

 

# localstorage

데이터를 만들고 새로고침을하면 localstorage에 저장된 데이터가 불러져 나온다.

F12 개발자 도구 => Application => Local Storage 로 가면

key와 value값으로 저장 된다는것을 알 수 있다.

 

# recoil을 이용해 state 저장하기

 

 우선 atom에 persistAtom을 만든다. key는 localstorage에 저장되는 string명이고,

storage는 기본값 localstorage로 한다.

사용하고자하는 state atom에 맨마지막 줄에 있는

effect_UNSTABLE 속성을 똑같이 추가해준다..!

그리고 사용할 Recoilstate에 적용된 toDoState를 넣으면 해당 기능에 적용된것을 볼수 있다..!!

 

 

key값에 recoil-persist 이름으로 들어와있다.

 

코딩 안하고 라이브러리에서 시키는대로만 하면 잘 적용되서 

리액트가 잠깐 좋아졌다..ㅎㅎㅎ