(React) 쇼핑몰 만들기 - 애니메이션 효과 적용하기

App.css 에 다음 코드를 추가해준다.

.start{
  opacity: 0;
}

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

👉 className="start" -> className="start end" 으로 변하면서 애니메이션 효과를 주는 코드이다.

opacity 외에도 transform: scale(0) -> transform: scale(1) 같은 애니메이션 여러가지 응용가능

Detail.js 에서 Tab Component를 다음과 같이 수정한다.

function Tab({ tab }) {
  const [fade, setFade] = useState("");

  useEffect(() => {
    const to = setTimeout(() => {
      setFade("end");
    }, 100);
    return () => {
      clearTimeout(to);
      setFade("");
    };
  }, [tab]);

  return (
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]}
    </div>
  );
}

 <div className={`start ${fade}`}>

👉 fade 자리에 end 를 떼었다 붙였다 하기 위함.

const [fade, setFade] = useState("");

👉 fade 를 변경하기 위해 state 로 생성.

 useEffect(), setTimeout()

👉 start -> start end 이런 과정이 있어야 애니메이션 효과가 적용된다.
그렇기 때문에 return 안에 fade를 ''으로 바꿔주어 선실행 되도록 하고 100ms 간격을 두고 fade를 'end'로 바꿔주었다.
리액트의 automatic batching 기능 때문에 근처에 있는 같은 state를 변경하는 코드는 마지막코드에서만 재랜더링이 되는 원리가 있다. 때문에 시간차를 두고 변경을 해야 state 변경이 각각 적용이 되는 것이다.

탭을 눌러주면 애니메이션이 이쁘게 적용된다.