localStorage 이용관련

페이지 구성을 조금 다르게 해서, 하단에 상품 정렬되도록 나오고, 버튼 클릭시
shop/{i}로 이동하도록 만들었습니다.

그리고 처음 페이지는 i=0이 되도록 설정했습니다.

<div className="row">
{
shoes.map(function(a,i){
return(
<Products shoes={shoes} i={i} key={i} onClick={()=>{
setSelectedProduct(i);
navigate(`/Shop/${i}`);
MoveToTop();
let viewed = JSON.parse(localStorage.getItem('viewed'));
let newViewed = viewed.push(selectedProduct);
 localStorage.setItem('viewed', JSON.stringify(newViewed));
} } ></Products>
)
})
}
</div>

질문은 여기서 onclick에 기능을 추가할 시,

let viewed = JSON.parse(localStorage.getItem('viewed'));
cosole.log(viewed);//[]
let newViewed = viewed.push(selectedProduct);
cosole.log(newViewed);//[i]
까지는 작동하는데

 localStorage.setItem('viewed', JSON.stringify(newViewed));
여기서 업데이트가 안 됩니다. 

혹시 onclick에 추가할 시 작동이 안 되는 걸까요?

이건 코드 전부입니다.
혹시나 해서 첨부드립니다.

function Shop(props){
let [fade2, setFade2] = useState('')
let [shoes,setShoes] = useState(data);
let [more,setMore] = useState(true);
let [loading,setLoading] = useState(false);
let 
 = useState(1);
let navigate = useNavigate();
let {id=0} = useParams();
const [selectedProduct,setSelectedProduct] = useState(Number(id));
let [amount,setAmount] = useState('');
const [count, setCount] = useState(0);
const MoveToTop = () => {
 window.scrollTo({ top: 0, behavior: 'smooth' });
 };

let state = useSelector(state=>state);
let dispatch = useDispatch()

 
useEffect(()=>{
let timer = setTimeout(()=>{
setFade2('end')
 },100)
return ()=>{clearTimeout(timer); setFade2('')}
 },[])

useEffect(()=>{
if(isNaN(amount)){
alert('숫자만 입력가능합니다.')
 }
 },[amount])

return(
<div className = {`start ${fade2}`}>
 <Detail shoes={shoes} selectedProduct={selectedProduct} setAmount={setAmount} amount={amount} dispatch={dispatch}></Detail>
 <Nav variant="tabs" defaultActiveKey="link-1" style={{marginLeft : '1px'}}>
 <Nav.Item>
 <Nav.Link eventKey="link-0" onClick={()=>{setTab(0)}}>제품 정보</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link eventKey="link-1" onClick={()=>{setTab(1)}}>상세페이지</Nav.Link>
 </Nav.Item>
 <Nav.Item>
 <Nav.Link eventKey="link-2" onClick={()=>{setTab(2)}}>사이즈</Nav.Link>
 </Nav.Item>
 </Nav>
 <Tabcontent tab={tab} shoes={shoes} selectedProduct={selectedProduct}></Tabcontent>

 <div className="container">
 <div className="row">
 {
 shoes.map(function(a,i){
return(
<Products shoes={shoes} i={i} key={i} onClick={()=>{
setSelectedProduct(i);
navigate(`/Shop/${i}`);
MoveToTop();
let viewed = JSON.parse(localStorage.getItem('viewed'));
let newViewed = viewed.push(selectedProduct);
 localStorage.setItem('viewed', JSON.stringify(newViewed));
 } } ></Products>
 )
 })
}
 </div> //해당 부분
 {
 loading ==true ? <Spinner className='mt-4' animation="border" variant="secondary" /> : null
}
 
 </div>
 {
 more == true ? <button className="btn btn-dark my-3" onClick={()=>{
setCount(count + 1);
setLoading(true)
if(count == 1){
 axios.get('https://codingapple1.github.io/shop/data2.json')
 .then((result)=>{
let copy = [...shoes, ...result.data]
setShoes(copy);
setLoading(false);
 })
 .catch(()=>{setLoading(false);throw '실패 ㅅㄱ'})
 } else if(count==2) {
setLoading(true);
 axios.get('https://codingapple1.github.io/shop/data3.json')
 .then((result)=>{
let copy = [...shoes, ...result.data]
setShoes(copy);
setLoading(false);
 })
 .catch(()=>{setLoading(false);throw '실패 ㅅㄱ'})
setMore(false)
 } 
 
 }}>MORE</button> : null
}
 
 
 </div>
 )
}

function Detail(props){
return(
<div className="container my-4">
 <div className="row">
 <div className="col-6">
 < img src={`https://codingapple1.github.io/shop/shoes${props.selectedProduct+1}.jpg`} width="100%" />
 </div>
 <div className="col-6">
 <h4 className="pt-5">{props.shoes[props.selectedProduct].title}</h4>
 <p>{props.shoes[props.selectedProduct].content}</p>
 <p>{props.shoes[props.selectedProduct].price}원</p>
 <input type='text' placeholder='ex)1' onChange={(e)=>{
 props.setAmount(e.target.value)
 }}></input>
 <button className="btn btn-danger" onClick={()=>{
 props.dispatch(addItem(props.shoes[props.selectedProduct]))
 }}>주문하기</button>
 </div>
 </div>
</div>
 )
}

function Tabcontent({tab, shoes, selectedProduct}){
let [fade,setFade] = useState('')
useEffect(()=>{
let a = setTimeout(()=>{
setFade('end')
 },100)
return ()=>{clearTimeout(a); setFade('')}
 },
)
return( 
<div className={`p-5 tab-content start ${fade}`}>
 {[<div>{shoes[selectedProduct].title}</div>, <div>상세 페이지</div>,<div>사이즈</div>]
 }
 </div>)
}

export {Shop}