React - localStorage에 대하여

새로고침하면 없어지는 일시적인 데이터들을 반영구적으로 저장하기 위해 localStorage를 사용할 수 있다.
개발자도구의 localStorage에 어떤 아이템들을 추가, 가져오기, 삭제 등 여러가지 기능이 있다

localStorage.setItem('데이터이름', '데이터');   //추가
localStorage.getItem('데이터이름');            //가져오기
localStorage.removeItem('데이터이름');         //삭제

😮localStorage에 array/object 자료 저장하는법

array/object 자료를 JSON을 사용해서 문자형태로 바꿔줘야한다.

localStorage.setItem('obj', JSON.stringify( {name : 'hwarang'} );

😮저장된 array/object 자료를 다시 가져오는법

문자형태로 변환된 자료를 다시 원래 array/object 형태로 바꿔줘야한다.

let a = JSON.parse(localStorage.getItem('obj'));

이를 활용하여 최근 본 상품 목록 만드는 기능 제작
1. 먼저 App.js에 사이트 접속시 localStorage에 'watched' 라는 key에 대한 빈 배열을 생성하는 코드를 짬

useEffect(()=>{
    for(let i = 0; i < localStorage.key.length; i++){
      if(localStorage.key(i) == 'watched'){
        
      } else {
        localStorage.setItem('watched', JSON.stringify([]))
      }
    }
  }, [])

사이트에 접속할때마다 watched라는 이름의 항목이 생성되지 않도록 검사하고, 없으면 생성함

2. 어떤 제품을 클릭해서 상세페이지(Detail.js)에 접속하면 그 배열에 자동으로 상품의 고유 id가 추가됨

useEffect(()=>{
        let watched = JSON.parse(localStorage.getItem('watched'))
        watched.push(fixId.id)
        let newWatched = [...new Set(watched)] //new Set() 으로 배열의 중복을 쉽게 제거
        localStorage.setItem('watched', JSON.stringify(newWatched))
    }, [])

아까 생성한 watched라는 key의 빈 배열을 JSON.parse()를 통해 꺼내서 그 배열에 현재 detail.js의 상품 고유 id번호를 push()로 넣고 다시 localStorage에 저장함.
(이때 Set()함수를 활용하여 한번 본 상품을 또 봤을 때 배열에 중복이 되지 않도록 중복 제거함)

🥲하다가 중간에 잘 안되서 고민했던 점

위와같이 코드를 짜고 실행을 시켜봤는데 계속 상품을 한번 클릭했는데 배열에 두번 id가 추가되서 뭔가 실행이 두번된다는것 같은데 뭐때문에 실행이 두번되는지 몰라 오래 헤맸다..
결론 : index.js에서 React.strictMode 태그를 지우니까 한번씩 잘 실행되었다!