transition

만드는 방법

애니메이션을 만들고 싶다면,

1. 애니메이션 동작 전 스타일을 담을 className 만들기
2. 애니메이션 동작 후 스타일을 담을 className 만들기
3. transition 속성도 추가
4. 원할 때 2번 탈부착

의 과정을 거친다.

/* 1. 동작 전 스타일을 담은 CSS */
.start {
	opacity: 0
}
/* 2. 동작 후 스타일을 담은 CSS */
.end {
	opacity: 1;
/* 3. transition 속성 추가 */
	transition: opacity 0.5s
}

function TabContent({탭}){
	let [fade, setFade] = useState('');

	useEffect(() => {
		setFade('end')
	},[탭])

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

탭 이라는 state가 변할 때마다 fade 라는 state가 ‘end’ 로 바뀌기 때문에 className="start end" 로 변하게 된다.

하지만 의도와는 다르게 애니메이션이 적용되지 않는데

end 라는 클래스명을 떼었다 붙였다를 해야 정상적으로 적용이 된다.

function TabContent({탭}){

  let [fade, setFade] = useState('')

  useEffect(()=>{
    setTImeout(()=>{ setFade('end') }, 100)
	  return ()=>{
	    setFade('')
	  }
  }, [탭])

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

automatic batch

useEffect() 내부 setTimeOut 함수가 쓰였는데

state변경함수들이 연달아서 여러개 처리되어야 한다면

state변경함수를 다 처리하고 마지막 한 번만 재렌더링 된다.

그래서 setTimeOut() 로 약간의 시간 차를 둔 것이다.

이외에 flushSync() 를 사용하기도 한다.