onAnimationEnd란

<div
      className={next ? "loading fadeOut" : "loading"}
      style={{ position: "absolute" }}
      onAnimationEnd={() => {
        skip(true);
      }}
 >
 ...
 </div>

코드 중 이런 코드를 발견하게 되는데 여기서 onAnimationEnd는 무엇일까??

onAnimationEnd 이벤트 핸들러는 애니메이션이 끝났을 때 실행되는 콜백 함수이다.

해당 코드에서는 onAnimationEnd 이벤트가 발생하면 콜백 함수가 호출된다.

 

여기서 의문은 이 div 태그에 어떤 애니메이션이 있는가이다.

 

답은 바로 className 

 

코드에서 <div> 태그는 loading 클래스가 있는 요소이다.

해당 요소에는 CSS에서 정의된 애니메이션 클래스(fadeOut)가 추가되거나 제거되는데 이게 바로 애니메이션! 

애니메이션 클래스가 추가되면 loading 요소는 해당 애니메이션을 수행하고, 애니메이션이 끝나면 onAnimationEnd 이벤트 핸들러를 통해 skip(true) 함수가 호출되어 다음 동작을 수행할 수 있게 된다~!