[React] 컴포넌트 전환 애니메이션 주기

리액트를 이용해 컴포넌트 전환 애니메이션을 주려면 라이브러리설치를 해서 써도 되지만 원리를 알고 사용하면은 라이브러리를 이해하기도 좋을것 같고 간단한 애니메이션은 라이브러리를 사용하지않고 직접 만들 수 있어서 몇가지 스텝을 정리 해보려고 한다.
리액트나 css를 이용해서 애니메이션 효과를 주려면 4가지 스텝을 거치면 된다.

1. 애니메이션 동작 전 스타일을 담은 css속성(React에서는 className) 만들기
2. 애니메이션 동장 후 스타일을 담은 css속성(React에서는 className) 만들기
3. transition 속성 추가
4. 애니메이션 동작을 원하는 타이밍에 css속성 탈부착

애니메이션 동작 전, 후 className 만들기.

보여주고싶은 애니메이션 속성 전, 후를 만들어 준다. 예시로는 opacity를 이용해 투명도가 없는 상태에서 서서히 보여지는 상태를 만들어 줬다.

.start {
  opacity : 0
}
.end {
  opacity : 1;
}

• start만 있는 상태에서는 아무것도 안보일 것이고 end속성이 들어가면 페이지에 보일 것이다.

transition 추가 해주기

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

• transition을 줘서 변화가 일어났을때 0.5초에 걸쳐서 0 에서 1로 보여준다.

원하는 타이밍에 className넣어주기

useEffect를 이용해 페이지가 로드될때 한번 실행 하도록 해줬다.

const Detail = function Detail({ shoes }) {
   const [fade, setFade] = useState("end");

  
   useEffect(() => {
      setTimeout(() => {
        setFade("end");
      }, 100);
      return setFade("");
    }, []);
  
  return (
    <div className={`container start ${fade}`}>
	(생략)
	</div>
}

• clean up function 안에 setFade를 공백으로 주고 setTimeout을 이용해 0.1초 뒤에 setFade를 end로 바꿔 줬다. 템플릿리터럴을 이용해 className이 들어가게 해줬다.

리액트 18버전 이상부터는 automatic batch라는 기능이 생겼는데 이는 state변경 함수가 연달아 여러개 처리를 해야되는 상황이면 변경 상황을 다 처리하고 마지막 한번만 재렌더링이 된다. 그렇기 때문에 setTimeout을 이용해 약간의 시간차를 둬서 상태변경을 한번에 처리하지 않게 만들어 줬다.