tab ui component
function TabContent({tab,fade,setFade}) {
useEffect(()=>{
setFade('end') ---------------4
return(()=>{
setFade('') --------------3
})
},[fade]) -----------------2
-------
function List(props) {
let [fade,setFade] = useState();
let flush = function(){
flushSync(()=>{
setFade('')
})
}
return (
<Nav variant="tabs" defaultActiveKey="0"
onSelect={(e)=>{
setTab(e) ---------------
flush() ------------- 1번
}}>
<Nav.Item>
<Nav.Link eventKey="0">버튼0</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="1">버튼1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2">버튼2</Nav.Link>
</Nav.Item>
</Nav>
<TabContent tab={tab} fade = {fade} setFade={setFade}/>
-------------------
1번 - 탭메뉴 클릭하면 flush함수 실행
2번- fade의 상태값에 따라서만 useEffect 실행
4번 - 마지막으로 end 값 던져주기
3번 - 언마운트시 빈 값 줘야지...
코드 리뷰요
