만들면서 배우는 react : 기초 - 11

로컬스토리지에 데이터를 싱크할 것이다.
로컬스토리지란?
localStorage를 사용하면 브라우저에 key-value 값을 저장할 수 있고,
저장한 데이터는 세션간에 공유가 된다.
즉, 세션이 바뀌어도 저장한 데이터가 유지된다~!!!

---

로컬스토리지에는 데이터가 무조건 문자열로 저장된다고 한다…ㅠㅠㅠ
그래서 문자열이 아닌, 본연의 데이터로 저장될 수 있게 해주어야 한다.

const jsonLocalStorage = {
  setItem: (key, value) => {
    localStorage.setItem(key, JSON.stringify(value));
  },
  getItem: (key) => {
    return JSON.parse(localStorage.getItem(key));
  },
};

setItem 으로 값을 넣어주고, getItem으로 값을 꺼내준다.

하트를 눌렀을 때 이미지 저장과 formSubmit 시 저장된 counter를 set해줄 것이당
그리고 초기값에 로컬스토리지에 저장된 값을 get해서 지정해준다.
이렇게 값을 적절히 get하고 set해주면 데이터 저장과 조회가 가능하다.

const App = () => {
  const CAT1 =
    "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
  const CAT2 =
    "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
  const CAT3 =
    "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";
  
  const [counter, setCounter] = React.useState(jsonLocalStorage.getItem("counter")); //로컬스토리지에 저장된 counter를 가져와 초기값 설정
  const [mainCat, setMainCat] = React.useState(CAT1);
  const [favorites, setFavorites] = React.useState(jsonLocalStorage.getItem("favorites") || []); //로컬스토리지에 저장된 favorites를 가져와 초기값 설정. favorites 값이 없다면 빈 값으로 설정.
  
  function updateMainCat() {
    setMainCat(CAT2);
    const nextCounter = counter + 1;
    setCounter(nextCounter);
    jsonLocalStorage.setItem("counter", nextCounter); //nextCounter를 counter라는 이름으로 저장
  }
  
  function handleHeartClick() {
    const nextFav = [...favorites, mainCat]
    setFavorites(nextFav);
    jsonLocalStorage.setItem("favorites", nextFav); //nextFav favorites라는 이름으로 저장
  }
  
  return (
    <div>
      <Title>{counter}번째 고양이 가라사대</Title>
      <Form updateMainCat={updateMainCat} />
      <MainCard img={mainCat} onHeartClick={handleHeartClick} />
      <Favorites favorites={favorites} />
    </div>
  );
};

이렇게 해주면 로컬스토리지를 이용한 기능 완성~!!!
로컬스토리지를 이용하는 방법은 처음 알게되었는데, 생각보다 편리하고
가볍게 기능구현할 때는 사용하기 편리할 것 같다라고 느꼈다_
자주 사용해봐야징~~~!!!