Transition

CSS Transition (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)

CSS간 전환효과를 적용하는 기법.

특정 동작시 애니메이션 효과를 주는 등 꾸밀 수 있다.

---

Fade In 효과 보여주기

App.css에 css를 추가한다.

.fade-in-start {
  /* 불투명도 0 */
  opacity: 0;
}

.fade-in-end {
  opacity: 1;
  /* opacity 효과 전환시간을 0.5초에 걸쳐 전환되도록 함 */
  transition: opacity 0.5s;
}

HTML 요소에 fade in 효과 적용하기

let [fadeInEnd, setFadeInEnd] = useState('');

useEffect(() => {
  setTimeout(() => {
    setLoadEnd('fade-in-end');
  }, 100);
  
  return () => {
    setLoadEnd('');
  }
}, [])

return(
  {/* className에 fade-in-start와 fade-in-end를 넣어 transition 효과 부여 */}
  <div className=`container fade-in-start ${fadeInEnd}`}>
    ...
  </div>
);

className에 fade-in-end를 setLoadEnd에서 값을 넣어주는 이유 ?

• transition 효과는 해당 css를 불러오는 시점에 적용됨.

useEffect() method 내 setLoadEnd('')를 clean-up 영역에 사용한 이유?

• state 변경 함수가 여러개 있을 경우 불필요한 재렌더링을 피하기위해 state변경함수를 묶어서 처리하게 됨.
• https://react.dev/blog/2022/03/08/react-18-upgrade-guide#automatic-batching