[React] - 전환 애니메이션 주기(opacity, automatic batching)

버튼 같은 걸 클릭했을 때 글씨가 서서히 보이는 경우가 있다.
이번에는 그 방법을 끄적끄적 적어보겠다.

let [글씨, 글씨변경] = useState(0);

let App = ()=>{
return(
<button onClick={ () => {글씨변경(1)} }>버튼 1</button>
<button onClick={ () => {글씨변경(2)} }>버튼 2</button>
<button onClick={ () => {글씨변경(3)} }>버튼 3</button>

// 클릭시 이벤트를 주어 state를 변경

<Content 글씨={글씨}/>
)
}



let Content = ( { 글씨 } ) => {

	let [fade, setFade] = useState('');
    
    useEffect( () => {
    setTimeout( () => { setFade('end') }, 100)})
    return()=>{ setFade('') }
    },[ 글씨 ])
    
    
    
    
	return(
    <div className = "start "+fade>
    {[<div>1번 내용</div>,<div>2번 내용</div>,<div>3번 내용</div>][글씨]}</div>
    )
}

export default App;

useEffect()를 사용했을때 return()을 사용하면 useEffect안의 콜백함수에서 실행하기전에 먼저 return()문을 실행하게 되는데

이번에 React가 업데이트 되면서 automatic batching 기능이 추가되었다.

automatic batching 이란 ?

useEffect( ()=>{
setFade('end')
return()=>{setFade('')}
} )
이렇게 먼저 실행하려는 코드와 그 후에 실행하려는 코드가 비슷한 경우
한 번에 묶어서 실행하는 기능이다.
그렇기 때문에 한 번에 실행되는 걸 방지하기 위해 setTimeout을 사용하였다.

**CSS 부분
1. 애니메이션 동작 전 classname 만들기
2 애니메이션 동작 후 classname 만들기

opacity => 투명도
transition => 애니메이션을 부과해 주는 스타일
transition: opacity 0.5s => 투명도 0 ~ 투명도 1까지 0.5초에 걸쳐서 실행
**

.start {
	opacity: 0;
}

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

완성

이번에는 opacity로 글씨의 투명도를 다루어봤지만,
transform: scale을 사용해서 글씨의 크기도 다루어볼 수 있다.