[React] Counting Number 애니메이션 효과

개요

퍼블리싱 작업을 하면서 페이지 진입 시, 숫자가 카운되었으면 좋겠다는 요청이 있어 구현함.

결과 미리보기

이제 구현을 해보자! 🙌

사용 순서

1. Hook 파일 생성하여 다음과 같이 입력

import { useCallback, useEffect, useRef } from "react";

export const useScrollCount = (end, step, start = 0, duration = 10) => {
  const dom = useRef();
  const observer = useRef(null);
  const stepTime = Math.abs(Math.floor(duration / (end - start)));

  const handleScroll = useCallback(
    ([entry]) => {
      const { current } = dom;

      if (entry.isIntersecting) {
        let currentNumber = start;

        const counter = setInterval(() => {
          currentNumber += step;
          current.innerHTML = currentNumber.toLocaleString();

          if (currentNumber === end) {
            clearInterval(counter);
            observer.current.disconnect(dom.current);
          }
        }, stepTime);
      }
    },
    [end, start, stepTime, dom],
  );

  useEffect(() => {
    if (dom.current) {
      observer.current = new IntersectionObserver(handleScroll, {
        threshold: 0.8, // 지정한 ref dom 이 화면상에 80% 이상 보이면 동작 실행
      });
      observer.current.observe(dom.current);
    }

    return () => observer && observer.current.disconnect();
  }, [handleScroll]);

  return {
    ref: dom,
  };
};

a. duration 은 도달 숫자까지 걸리는 시간을 의미한다.

2. 사용할 file 에 해당 Hook 적용

   import { useScrollCount } from "hooks";

3. 사용할 element 에 ref 지정

const animatedItem = useScrollCount(
  parseInt(intl.formatMessage({ id: "ID_CREATOR_COUNT_NUMBER" })), // 국제화를 위함.
);

return (
	<span ref={animatedItem.ref} className={styles.count_number}>
	  0
	</span>
)

구현 끝!

참고

• react CountUp
  a. https://github.com/glennreyes/react-countup#installation (참고)
  b. https://github.com/jus0k/scroll-hooks/blob/master/src/hooks/useScrollCount.jsx (참고2)!