[React] localStorage 브라우저 데이터 저장 2 (최근 본 상품(페이지) 기록하기)

과제 출처 : 코딩애플

1. 목표

• 메인페이지에 있는 상품의 상세페이지로 이동하는 경우 해당 상품의 id값을 localStorage에 저장한다.
• 중복된 값이 있는 경우 제거한다.

2. 코드 

App.js

<Route path='/detail/:id' element={<Context1.Provider value={{재고, shoes}}><Detail className={'start'}  shoes={shoes}/></Context1.Provider>}/>

 

• 기존에 detail에 전달되는 shoes 데이터를 이용해서 detail.js에서 id값을 조회하여  localstorage에 데이터를 저장한다. 

Detail.js

function Detail(props) {
      //url로 가져온 id값
      let {id} = useParams();
      //find 함수로 url로 가져온 id값과 일치하는 id값을 찾는다. 
      let find_product = props.shoes.find(x => x.id == id);
      
      //Detail 페이지가 한번 로드 될때 한번 씩 실행 
      useEffect(()=>{
      
      // if문을 통해 localStorage의 데이터가 빈값이 아니면 배열을 복사해 
      // 현재 id값을 추가하여 덮어씌우는 형태로 구현 
      // 그게 아니라면 지금 현재 값으로 localStorage에 바로 데이터 추가 
        if( JSON.parse(localStorage.getItem('product_num')) != '[]') { 
            let product_num = JSON.parse(localStorage.getItem('product_num'))
            product_num.push(find_product.id);
            const new_ptnum = Array.from(new Set(product_num));
            localStorage.setItem('product_num', JSON.stringify(new_ptnum))
        } else {
            let product_num = [];
            product_num.push(find_product.id);
            localStorage.setItem('product_num', JSON.stringify(product_num))
        }
      }, [])

 return (
 
 
 )
}

• const new_ptnum = Array.from(new Set(product_num))를 통해 기존 데이터를 추가할  때 중복되는 데이터
  는 Set함수를 통해 중복되는 값을 제거하여 Array형식으로 출력하게 하게 만들었다.

 

이상하게 혼자 문제를 잘 풀었는데도.. 자꾸 데이터가 초기화되는 문제가 있었는데 

30분동안 애꿎은 코드만 손 보다가  App.js에  로컬스토리지를 테스트하면서

빈배열을 추가하는 코드를 적어놓고 까먹고 있었다.. 😂..