localStorage로 만드는 최근 본 상품 기능 오류

[김도훈]

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Nav } from "react-bootstrap"
import { addItem } from "./../store/countSlice"
import { useDispatch } from "react-redux";

function Detail(props) {

let {id} = useParams();
let 찾은상품 = props.shoes.find(x => x.id == id);

let [count, setCount] = useState(0);
let [num,setNum] = useState('');
let 
 = useState(0);

let dispatch = useDispatch()

useEffect(()=>{
let out = localStorage.getItem('watched')
out = JSON.parse(out)
out.push(찾은상품.id)
 
//Set으로 바꿨다가 다시 array로 만들기
out = new Set(out)
out = Array.from(out)
localStorage.setItem('watched', JSON.stringify(out))
 }, [])

useEffect(()=>{
if (isNaN(num) == true){
alert('숫자를 입력하세요')
 }
 }, [num])

return (
<div className="container">
 <button onClick={() => {
setCount(count+1)
 }}>버튼</button>
 <div className="row">
 <div className="col-md-6">
 
 </div>
 <div className="col-md-6">
 <input onChange={(e)=>{ setNum(e.target.value) }} />
 <h4 className="pt-5">{찾은상품.title}</h4>
 <p>{찾은상품.content}</p>
 <p>{찾은상품.price}원</p>
 <button className="btn btn-danger" onClick={()=>{
dispatch(addItem( {id : 찾은상품.id, name : 찾은상품.title, count : 1} ))
 }}>주문하기</button>
 </div>
 </div>

 <Nav variant="tabs" defaultActiveKey="link0">
 <Nav.Item>
 <Nav.Link onClick={()=>{
setTab(0);
 }}eventKey="link0">버튼0</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link onClick={()=>{
setTab(1);
 }}eventKey="link1">버튼1</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link onClick={()=>{
setTab(2);
 }}eventKey="link2">버튼2</Nav.Link>
 </Nav.Item>
 </Nav>
 <TabContent tab={tab}></TabContent>

 </div>
 )
}
function TabContent({tab}) {
 
let [fade, setFade] = useState('')

useEffect(()=>{
let a = setTimeout(()=>{setFade('end')}, 100)
return ()=>{
clearTimeout(a)
setFade('');
 }
 }, 
)

if (tab == 0) {
return <div className={`start ${fade}`}>내용0</div>
 } else if (tab == 1) {
return <div className={`start ${fade}`}>내용1</div>
 } else if (tab == 2) {
return <div className={`start ${fade}`}>내용2</div>
 }
}

export default Detail;

npm start로 페이지를 열고 상품을 클릭하면 
out = JSON.parse(out)
out.push(찾은상품.id)

이 두 줄이 왔다 갔다 하면서 오류가 뜹니다 ㅠㅠ 어떤 이유인지 모르겠네요...

[codingapple]

localStorage에 데이터가 없거나 그런 경우가 아닐까요 out 변수 잘 나오나 출력부터 해봅시다

[글쓴이]

글