[React_study] 컴포넌트 전환 애니메이션 지정 (transition & automatic batch)

* 애니메이션 개발 단계

1. 애니메이션 동작 전 스타일을 담아둘 className생성
2. 애니메이션 동작 후 스타일을 담아둘 className생성
3. transition 속성 추가
4. 원할 때 2번 탈부착을 해준다.

* 애니메이션 예시 코드 (fade in 애니메이션 예시 코드)

1. 애니메이션 동작 전 className 생성
2. 애니메이션 동작 후 className 생성
3. transition 추가
4. 원할 때 fade-end 탈부착

.fade-start {
  opacity : 0;
}
.fade-end {
  opacity : 1;
  transition : opacity 0.5s;
}

function TabContent({tab}){

  return (
    <div className="fade-start fade-end">
      { [<div>content0</div>, <div>conten1</div>, <div>content2</div>][tab] }
    </div>
  )
}

• useEffect를 활용해서 코드 구성 가능
• useEffect를 사용하면 특정 state혹은 prorps가 변할 때 마다 코드가 실행이 가능하므로 활용 가능

function TabContent({tab}){

  const [tab, setTab] = useState(0);
  const [fade, setFade] = useState('');

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

  return (
    <div className={'fade-start ' + fade}>
      { [<div>content0</div>, <div>content1</div>, <div>content2</div>][tab] }
    </div>
  )
}

• fade라는 state를 만들고 state에 따라서 className이 어떻게 보일지 작성후 원할 때 fade를 변경
• tab이라는 state가 'fade-end'로 변하면 className="fade-end"로 변한다.
• clean up function안에 fade라는 state를 공백으로 변경하게 셋팅해두었다.
• 따라서 useEffect 실행 전엔 'fade-end'가 ' ' 이걸로 변경이 된다.

* setTimeout을 사용하는 이유

리액트 18버전 이상부터는 automatic batch라는 기능이 생겼다.

state변경함수들이 여러개 처리가 되어야 한다면

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

그래서 'fade-end'로 변경하는거랑 ' ' 공백으로 변경하는거랑 약간의 시간차를 두었다.

setTimeout 말고 flushSync()를 사용해도 automatic batching를 막아준다.