상품 데이터 더 받아오기 질문

선생님 질문 하나만 더 할게요.. 컴포넌트 전환 애니메이션에서 
useEffect를 재활용 할 순 없나요?

TabContent 컴포넌트에 useEffect를 다음과 같이 사용하고 

const TabContent = ({ tab, fade, setFade }) => {
useEffect(() => {
const a = setTimeout(() => {
setFade("end");
 }, 10);
return () => {
clearTimeout(a);
setFade("");
 };
 }, 
);
return (
<div className={`start ${fade} `}>
{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>]
}
</div>
 );
};

TabContent가 종속되어 있는 Detail 컴포넌트에 
const [fade, setFade] = useState("");
useEffect(() => {
setFade2("end");
return () => {
setFade2("");
 };
 }, []);

return (
    <div className={`start ${fade2} `}>
     생략~
     <TabContent tab={tab} fade={fade} setFade={setFade} />
    </div>

)

다음과 같이 했는데 tab버튼을 누를때 detail 컴포넌트의 애니메이션도 계속 발생하네요.
빡통식 정리에서 
useEffect(()=>{}, []) --> mount시 1회 코드 실행
useEffect(()=>{}, 
) -->tab이 변경될때마다 코드 실행이라고 해서 될 줄 알았는데 아닌가봐요..
useState를 다른 이름으로 또 만드는 수 밖에 없을까요? 아니면 같이 쓸 수 있는 방법이 있나요?

선생님 링크는 전부다 navigate()로 했는데 그러네요.
더보기 버튼 횟수는 btnCount state에 저장하고 있습니다.
새로고침이 안되고 있다고 생각했는데 새로고침이 되고 있는 걸까요?

선생님 navigate()는 문제가 없었고
더보기 버튼 클릭하고 디테일 페이지에 갔다가 다시 돌아오면 (뒤로가기, navigate("/") 둘 다)
더보기로 추가한 상품은 그대로 남아있는데 (--> shoes 어레이에 추가한 데이터는 그대로)
사라졌던 더보기 버튼은 다시 생성되어 있는 것이 의아하여 (--> btnCount의 데이터는 리셋)
아래와 같이 Main 컴포넌트에 있던 btnCount state를 App으로 빼고 (shoes는 원래 App에 있었음)
Main 컴포넌트에서 props로 state를 적용해봤더니 원하는 대로 
디테일 페이지에 들어갔다 나와도 btnCount가 바뀌지 않네요.

제가 이해하기로는 현재 구조상 "/detail" 페이지로 가면 "/"페이지에 있던 <Main/>은 삭제되고
다시 "/"페이지로 왔을 때 <Main/>이 재랜더링 되기 때문에 그 안에 있는 btnCount도 초기화 되는 것으로 이해했는데
제대로 이해한 게 맞나요?

그럼 어떤 state를 초기화시키고 싶지 않으면 
1. 
무조건 App에다 생성한다.(물론 navigate()로만 이동)
2. 
<Route path="/" element={<Main />}>
  <Route path="/detail" element={<Detail />}/>
<Route>
이런식으로 구성하면 "/detail"페이지에 들어가도 Main에 저장한 state가 초기화되지 않음.(이것역시 navigate()로만)
(다만, <Main/>컴포넌트가 "/detail"페이지에도 남아있을테니 UI적으로 한계가 있을수도???있나요..?)

3.
서버, 로컬스토래지에 저장하면 navigate()로 가든 새로고침을 하던 뭘하던 저장.(지금 배우는 중..)

이렇게 세 가지로 이해했습니다.
제대로 이해한걸까요?
위에 두 가지는 제가 잘못 이해했거나 다른 방법이 있으면 좋겠는데
선생님 확인 한번 부탁드리겠습니다!

감사합니다 선생님