최근 본 상품이 새로고침하면 사라져요

[승]

localStorage에 최근 본 상품 여러개 담고 싶은데 다른 페이지로 넘어가면 바로 초기화 되네요
강의에서 배운 코드 복붙도 해봤는데 초기화 되는 건 똑같아요
특별히 뭔가를 건든 게 없는데 왜 이러는 걸까요?

아무래도 App.js의 useEffect [] 때문에 페이지가 새로 로드될때마다 빈 배열이 새로 생성되는 것 같기도 한데.. 
해결 방법을 모르겠어요..

App.js

  useEffect(() => {
    localStorage.setItem("watched", JSON.stringify([]));
  }, []);

Detail.js

  useEffect(() => {
    let recentItem = localStorage.getItem("watched");
    recentItem = JSON.parse(recentItem);
    recentItem.push(searchItem.id);
    localStorage.setItem("watched", JSON.stringify(recentItem));
  });

그리고 localStarage에 저장되는 데이터를 여러 컴포넌트에서 사용하려 할 때에는
굳이 리덕스 store에 만들어서 불러다 사용할 필요는 없는 건가요?

[승]

Detail.js 의 useEffect()의 끝에 [] 중괄호를 넣으면 자꾸 아래 같은 에러가 발생하고 id가 localStorage에 들어가지 않습니다.
 

React Hook useEffect has a missing dependency: 'searchItem.id'. Either include it or remove the dependency array.
 

  useEffect(() => {
    let recentItem = localStorage.getItem("watched");
    recentItem = JSON.parse(recentItem);
    recentItem.push(searchItem.id);
    recentItem = new Set(recentItem); // 중복 제거
    recentItem = Array.from(recentItem); // array 로 변환

    localStorage.setItem("watched", JSON.stringify(recentItem));
  }, []);

괄호 안에 [searchItem] 을 넣어주면 에러가 사라지긴 하는데 이래도 localStorage에 id값이 저장되지 않아요..

[codingapple]

App.js 로드할 때 마다 로컬스토리지 watched 항목을 []로 바꾸라고 코드짜놔서그렇습니다 if 이런거 추가합시다 
searchItem 이라는 변수가 주변에 정의된게 없어서 그런가봅니다 

[글쓴이]

글