멋있게 탭메뉴 - flushsync

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번 - 언마운트시 빈 값 줘야지...

코드 리뷰요