React : 탭 내용 fade되도록 만들기 (+class에 변수 넣기)

풀이

useEffect를 사용하여 tab 값이 변경될 때마다 fade 값을 업데이트하고, 컴포넌트가 언마운트될 때 fade를 초기화하도록 넣었다.

function TabContent({tab}){
  let [fade, setFade] = useState('')
  useEffect(()=>{
    setTimeout(()=>{ setFade('end') }, 100)
    return ()=>{
      setFade('')
    }
  }, [tab])
  return (
    <div className={`start ${fade}`}>
    {/* <div className={'start ' + fade}> */}
     { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab] }
    </div>
  )
}

---

알게 된 점

• cleanup function을 사용해 end를 뗐다가 부착할 수 있도록 하였다.
• setTimeout을 이용하여 automatic batching 기능을 무효할 수 있도록 하였다.
• class에 변수를 넣으려면 {}와 백택 기호(`)로 감싸면 된다.

<div className={`container ${pagefade}`}>

---

같이 보면 좋은 글

[중요!] React : useEffect, clean up (조건 별 실행순서), automatic batching — Stack flows in you (tistory.com)

---

출처 : 코딩애플 https://codingapple.com/