React실전12 컴포넌트 전환 애니메이션 주는 법

2022-05-28 최대 1 분 소요

컴포넌트 전환 애니메이션 주는 법 (transition)

tap 누를 때 내용들이 잘 보이긴 하는데, 애니메이션이 있으면 좋을 것 같습니다.

이런 전환 애니메이션 주는 법을 알아봅시다.

CSS파일에 가서 부착하면 애니메이션 나오는 className 하나를 만들고

자바스크립트 파일로 돌아와서 내가 원할 때 그 className을 뗐다 붙였다 하면 끝이다.

이걸 step으로 나누자면,

react 18 버전 이상에서는 automatic batching 기능이 생겼어. state 변경하는 함수들이 근처에 있다. 근처에 2개가 있죠. 그럼 이것들을 하나로 합쳐가지고 최종적으로 딱 한번만 state를 변경해줍니다.

조금 더 정확히 말하면 state를 변경할 때마다 재렌더링을 시켜주는게 아니라, state 변경이 다 되고나서 마지막에 재렌더링을 딱 한번 시켜준다.

그래서

useEffect(()=>{
 setFade(‘end’)

 return()=>{
  setFade(‘’)
}

}, [탭] )

이렇게 작성하면 요것도 하나로 합쳐서, 한번에 state를 변경하려 한다. 그럼 그냥 최종적으로 setFade(‘end’) end로만 바뀌겠죠.

그래서 지금과 같이 시간차를 두는 코드로 짜게 되면, 후의 것을 나중에 실행할 수 있으니까 이런식으로 코드를 짜면 의도대로 잘 동작할 것이다.

opacity 말고도 온갖것들을 애니메이션으로 둘 수 있어.

예를들어,

transform: scale(0);

transform: scale(1);

작아졌다가 커져주세요 라는 뜻.

오늘의 숙제: detail페이지 로드시 투명도 0-1 애니메이션 주고 싶으면?

참고