useEffect 를 사용해 데이터를 localstorage에 저장 및 불러오기

 

 

현재는 브라우저를 새로고침하면 모두 초기화된다. 

실제 앱은 DB에 저장해서 마지막 상태가 업데이트 되어야 함

 

 

 

영속성(persistence)은 생성한 프로그램의 실행이 종료되더라도 사라지지 않는 데이터의 특성을 의미함

 

localstorage에 저장해서 영속성을 유지해 보도록 하겠다. 

 

 

 

 

 

현재 useState에 저장되어있던 초기 동물 값을 다 지우고, 빈 배열을 만든다. 

 

 

 

  useEffect(() => {
    //처음 실행시 한 번 실행됨(초기값을 넣을 때 사용한다. )
  }, []);

  useEffect(() => {
    //pets가 변경될 때 마다 실행됨
  }, [pets]);

 

 

useEffect를 통해서 내가 구현하고자 하는 두 가지 기능은 아래와 같다.

 

 

1.처음 앱 실행시 데이터 불러오기

 useEffect(() => {
    //처음 실행시 한 번 실행됨(초기값을 넣을 때 사용한다. )
    if (localStorage.getItem("petData")) {
      setPets(JSON.parse(localStorage.getItem("petData")));
    }
  }, []);

 

 

 

2. pets 수정시 데이터를 로컬에 저장하기

  useEffect(() => {
    //pets가 변경될 때 마다 실행됨 -> 로컬에 저장한
    localStorage.setItem("petData", JSON.stringify(pets));
  }, [pets]);

 

 

 

 

 

 

 

처음 실행 시 펫 데이터가 있으면 가져옴 

가져올 때 로컬스토리지는 json 형식이기 때문에 json.parse로 바꿔줘야함

그리고 저장할 때도 제이슨 형식으로 저장해줘야해서 json.stringify로 저장함 

 

 

 

 

 

새로고침해도 변함이 없다. 

 

 

---

https://arnopark.tistory.com/770

 

 

[React] 13. useEffect() 총정리

 

https://xiubindev.tistory.com/100

React Hooks : useEffect() 함수