[React] 컴포넌트 전환 애니메이션

목표

컴포넌트가 전환될 때 또는 특정 태그에 애니메이션을 적용시켜본다.

 

css설정

.start{
  opacity:0;
}

.end{
  opacity:1;
  transition:opacity 0.5s;
}

opacity는 투명도, transition은 0.5초에 걸쳐 서서히 변하도록 하는 것을 명시한 것이다.

위처럼 애니메이션 동작 전 스타일을 담을 className과 애니메이션 동작 후 스타일을 담을 className을 별도로 만든다.

그리고 transtion 속성을 추가해야한다.

 

태그에 애니메이션 적용

function TabContent({tab}){

    let [fade,setFade]=useState('')
    
    useEffect(()=>{
        setTimeout(()=>{setFade('end')},100)
        
        return ()=>{
            setFade('')
        }
    },[tab])  //이제 tab이 변할 때마다 useEffect 동작한다.

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

맨 밑 div에 className을 통해 애니메이션을 적용한 모습이다.

end는 없었다가 있어져야만 애니메이션 효과를 낼 수 있어 fade state를 사용했다.

그래서 tab 내용이 변할 때마다 fade state가 변하며 end가 생겨나도록 한 것이다.

 

useEffect에서 setTimer를 적용한 이유가 중요한데,

리액트의 automatic batching 기능에 의해 state값은 한번에 재랜더링 되기 때문으로

setTimer를 적용시키지 않으면 fade가 공백에서 end가 되는게 아닌,

처음부터 end 값을 가지게 되어 사용한 것이다.

 

 

출처 : 코딩애플_React 기초부터 쇼핑몰 프로젝트까지!

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌