LocalStorage로 만드는 최근 본 상품 저장하기

오늘은 localStorage 에 최근 본 상품의 id를 배열로 담아보도록 하려한다.

화면이 렌더링 된 이후에도 상품 id가 바뀔때마다 실행되는 useEffect를 사용한다.
일단 코드를 작성하는 순서에 대해서 정리해보면,

1. Detail.js 페이지에 들어가면
2. useEffect 코드가 실행된다.
3. 찾은 상품을 선언해준다.
4. useEffect 코드에서 찾은상품.id가 변경될때마다 localStorage에 새롭게 요소가 추가된다.

<app.js>

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

<detail.js>

 useEffect(() => {

    // 1. 먼저 app에 저장된 watched배열 을 가져온다 .
    // 2. watched를 문자열로 변환 후
    // 3.  배열에 push
    // 4. 새롭게 Watched에 업로드함과 다시 JSON화시켜줄것.
    
    let pick = JSON.parse(localStorage.getItem("watched"));
    pick.push(찾은상품.id);

    // pick = new Set(pick);
    // pick = Array.from(pick);

    localStorage.setItem("watched", JSON.stringify(pick));
  }, [찾은상품.id]);
  

그런데 위를 보면 id값이 중복되는 경우가 있다.
이미 상품 id가 이씅면 추가하지말아달라, 하는 if 문을 사용하기에는 귀찮으니 set자료형을 써보련다.

Set은 array 와 똑같은데 중복을 알아서 제거해주는 array 입니다
array <-> Set 변환도 쉬워서
array -> Set-> array 이런식으로 쓰면 중복제거를 좀 쉽게 할 수 있슴다

<app.js>

 useEffect(() => {
    
    let pick = JSON.parse(localStorage.getItem("watched"));
    pick.push(찾은상품.id);
    
	const uniqueWatched = Array.from(new Set(Watched))
    localStorage.setItem("watched", JSON.stringify(uniqueWatched));
  }, [ 찾은상품.id ]);