링크 이동시 더보기 상태가 그대로인 이유가 궁금합니다

[박땡땡]

/* eslint-disable */
import { 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';

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);

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('/about') }}>About</Nav.Link>
<Nav.Link onClick={()=>{ navigate('/event') }}>Event</Nav.Link>
</Nav>
</Container>
</Navbar>

<Routes>
<Route path="/" element={
<>
<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="/about" element={<About/>}>
<Route path="member" element={<div>멤버라능</div>}/>
<Route path="location" element={<div>위치정보라능</div>}/>
</Route>
<Route path="/event" element={<Event/>}>
<Route path="one" element={<div>첫 주문시 양배추즙 서비스</div>}/>
<Route path="two" element={<div>생일 기념 쿠폰 받기</div>}/>
</Route>
<Route path="*" element={<div>없는 페이지 입니다.</div>} />
</Routes>
 

</div>
 );
}
function Card(props){
let shoeslist = props.shoes;
return(
shoeslist.map(function(a, i) {
return(
<div className="col-md-4" key={i}>
<img src={`https://codingapple1.github.io/shop/shoes${i+1}.jpg`} width="80%"/>
<h4>{shoeslist[i].title}</h4>
<p>{shoeslist[i].content}</p>
</div>
 )
 })
 )
}

function About(){
return(
<div>
<p>어바웃페이지이이이</p>
<Outlet></Outlet>
</div>
 )
}

function Event() {
return(
<>
<h4>오늘의 이벤트</h4>
<Outlet />
</>
 )
}

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

-----
선생님 제 코드는 이러한데

메인에서 상품리스트를 더보기 버튼을 이용해  7,8,9 까지 불러온 상태에서
상단 navigation link로 디테일페이지나 어바웃페이지로 이동하고 다시 홈버튼을 눌러 메인으로 돌아왔을때
새로고침 된 것 처럼 화면이 초기화 되지않고 그대로 리스트가 7,8,9 까지 불러와져 있는데 이런건 왜그런가요?

일반 html에서 a 태그를 이용해 페이지 이동시 새로고침 현상처럼 화면이 초기화 되지않고
페이지를 이동해도 state 값이 유지되는 이유는
react의 특성으로 싱글페이지에서 라우터로 불러와서 그런건가요?

만약 상단 네비를 이용해 페이지 이동시엔 ajax로 불러왔던 화면 UI를 초기화 시키고
홈에서 상품리스트 클릭 후 상세페이지 들어갔다 뒤로가기 한 뒤에만 화면 UI를 7,8,9리스트까지 그대로 유지하고 싶으면 어떻게 해야할까요 ㅠㅠ?

link to 와 useNavigate 의 차이 때문에 페이지 이동시 화면유지 or 새로고침이 되는 걸까요?
 찾아봐도 잘 이해가 되지 않습니다 ㅠ..
뭐라고 검색해야 정보를 얻을 수 있을까요?

[codingapple]

새로고침만 안되면 컴포넌트 안의 state는 남아있습니다 
a태그로 이동하면 새로고침되고 navigate()는 새로고침 안됩니다 
<Link>도 a태그일걸요

[글쓴이]

글