📚 오늘의 목표

transition으로 컴포넌트 전환 애니메이션을 주자! 😎

---

💬 전환 애니메이션 주는 방법

Step1 💡 애니메이션 동작 전 className 만들기
Step2 💡 애니메이션 동작 후 className 만들기
Step3 💡 className에 transition 속성 추가하기
Step4 💡 원할 때 2번 className 부착하기

---

👀 코드로 살펴보기

App.css

.start{
  opacity: 0;
}

.end{
  opacity: 1;
  transition: opacity 0.5s; /* opacity가 변경될 때 0.5초에 걸쳐서 변경 */
}
...

Detail.js

...
function TabContent({tab}){
    let [fade, setFade] = useState('')
    useEffect(()=>{
        let a = setTimeout(()=>{setFade('end')}, 100)
        return()=>{
            clearTimeout(a)
            setFade('')
        }
    },[tab])

    return(
        <div className={'start ' + fade}>
            { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab] }
        </div>
    )
}
...

여기서 잠깐!

setTimeout을 쓴 이유는 무엇일까?

바로 React 18부터 생긴 Automatic Batching 기능 때문이다. 이 기능은 내부 소스, 외부 소스 상관 없이 state 업데이트를 일괄 처리하여 렌더링이 한 번에 이루어질 수 있도록 해 준다. 따라서 내가 return 문에 setFade('')를 적었다고 해도, 렌더링 시 setFade('')와 setFade('end')가 동시에 이루어지기 때문에 fade 기능이 제대로 구현되지 않은 것이다.

따라서 시간 차이를 두기 위해 setTimeout 함수를 사용한 것이다!