2. 버튼 누를때마다 animation 동작하게 만들기, with React, useEffect

animation 은 상태가 평가될때, 한번 실행된다.

 

버튼을 누를때마다,  실행되게 만들자.

 

재평가를 시키려면, useState 가 필요할 것이고,

트리거를 만드려면, useEffect 가 필요할것이다.

 

function LayoutHeader() {
  const [showModal, setShowModal] = useState(false);
  const cartCtx = useContext(CartContext);
		...

  let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;	// setBump 해야, bump 스타일 활성화

  useEffect(() => {
    setBtnBump(() => true);			// 버튼의 bump 스타일이, 생기는 트리거
    setTimeout(() => {				// 시간 이 지나면(애니메이션 지속시간에 의거) bump 스타일은 지워지고
      setBtnBump(false);
    }, 300);
  }, [cartCtx.totalPrice]);			// 카트의 물품이 변하면, 이 함수를 반복한다.

  return (
    <Fragment>
      <ul className={styles.header}>
				...
        <li className={btnStyle} onClick={toggleModal}>

누를때마다 bump 되는 애니메이션 완성

 

혹시 모를 광클을 대비하여,

아직 시간이 지나는 중이라면 setTimeout 을 리셋하는 클린업함수를 만들자.

function LayoutHeader() {
  const [showModal, setShowModal] = useState(false);
  const cartCtx = useContext(CartContext);
		...

  let btnStyle = `${styles.cart} ${btnBump ? styles.bump : ""}`;

  useEffect(() => {
    setBtnBump(() => true);			
    const setTime = setTimeout(() => {			
      setBtnBump(false);
    }, 300);
    
    return () => {
      clearTimeout(setTime);	// 클리어함수 생성
    };
    
  }, [cartCtx.totalPrice]);			

  return (
    <Fragment>
      <ul className={styles.header}>
				...
        <li className={btnStyle} onClick={toggleModal}>