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

App.js

/* eslint-disable */
import { useEffect, useState } from 'react';
import { Button, Navbar, Container, Nav, Row, Col} from 'react-bootstrap';
import bg from './bg.png';
import './App.css';
/* import a from './data.js' */
/* import {a, b} from './data.js' */
import data from './data.js'
import {Detail} from './pages/Detail.js';
import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import axios from 'axios'; 
import Card from './component/Card.js'
import Cart from './component/Cart.js'
//import {RecentlyItem} from './component/RecentlyItems.js'

function App() {
let [shoes, setShoes] = useState(data);
let navigate = useNavigate();
let [moreBtn, setMoreBtn] = useState(0);
let [loading, setLoading] = useState(false);
let [noitem, setItem] = useState(false);

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

return (
<div className="App">
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand onClick={()=>{ navigate('/') }}>ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link onClick={()=>{ navigate('/') }}>Home</Nav.Link>
<Nav.Link onClick={()=>{ navigate('/detail') }}>Detail</Nav.Link>
<Nav.Link onClick={()=>{ navigate('/cart') }}>Cart</Nav.Link>
</Nav>
{/* <Nav className="ms-auto">반가워요 kim</Nav> */}
</Container>
</Navbar>

<Routes>
<Route path="/" element={
<>
<RecentlyItem shoes={shoes} />
<div className="main-bg" style={{ backgroundImage: `url(${bg})` }}></div>
<div className="container">
<div className="row">
<Card shoes={shoes}></Card>
</div>
</div>

{
loading == true ? <Loading></Loading> : null
}
{
noitem == true? <NoItem></NoItem> : null
}

<button onClick={(e)=>{
setLoading(true);

if(moreBtn == 0) {
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result)=>{ 
setLoading(false);
let copyShoes = [...shoes];
copyShoes.push(...result.data);
setShoes(copyShoes);
 }).catch(()=> {
console.log('데이터 가져오기 실패');
 });
setMoreBtn(moreBtn+1);
 } else if(moreBtn == 1) {
axios.get('https://codingapple1.github.io/shop/data3.json')
.then((result)=>{ 
setLoading(false);
let copyShoes = [...shoes];
copyShoes.push(...result.data);
setShoes(copyShoes);
 }).catch(()=> {
console.log('데이터 가져오기 실패');
 });
setMoreBtn(moreBtn+1);
 } else {
setLoading(false);
setItem(true);
 }
moreBtn >= 2 ? e.target.style.display = 'none' : null;
 }}>더보기</button>
 
</>
} />
<Route path="/detail/:id" element={<Detail shoes={shoes}/>} />
<Route path="/cart" element={ <Cart/>}/>
<Route path="*" element={<div>없는 페이지 입니다.</div>} />
</Routes>
 

</div>
 );
}

function RecentlyItem(props){
let recentlyStorage = JSON.parse(localStorage.getItem('watched'));
let shoesList = props.shoes;
return(
<div className="recently-item-list">
<p>최근 본 상품</p>
{
recentlyStorage.map((a, i)=>{
return(
<div className="recently-item" key={i}>
<img src={`https://codingapple1.github.io/shop/shoes${a+1}.jpg`} onClick={()=>{ navigate('/detail/'+a) }} width="80%"/>
<p>{shoesList[a].title}</p>
</div>
 )
 })
}
</div>
 )
}

function Loading(){
return(
<>
<p>상품 목록을 불러오고 있습니다.</p>
</>
 )
}
function NoItem(){
return(
<>
<p>더 이상 상품이 존재하지 않습니다.</p>
</>
 )
}
export default App;

----
선생님 위와같이 최근 본 상품 기능을 만들었는데,
RecentlyItem 컴포넌트를 불러오지 않은 상태로 npm run start 를 한 뒤에  RecentlyItem 컴포넌트를 불러오면 정상적으로 화면이 보여지나,
RecentlyItem 컴포넌트를 불러온 상태로 npm run start를 하면 화면이 렌더링 되지 않습니다.
에러에 대해서 검색해봤는데 원인을 찾지 못하여 이렇게 질문 드립니다 ㅠ
npm run start 렌더링 과정에서  문제가 생기는 것 같은데 이유를 모르겠습니다 ㅠㅠ..