숫자를 빠르게 변경시키는 커스텀 훅(feat. React)

숫자를 목표치까지 빠르게 변경시키는 커스텀 훅을 만들어보았다.

code

import { useEffect, useState } from 'react';

type useRollingNumberProps = {
  target: number;
  min?: number;
  max?: number;
};

const useRollingNumber = ({
  target,
  min = 0,
  max = 100,
}: useRollingNumberProps) => {
  const [animatedNumber, setAnimatedNumber] = useState(0); // 화면에 표시할 숫자

  useEffect(() => {
    if (animatedNumber === 0) return setAnimatedNumber(target); // 초기값 설정
    if (animatedNumber === target) return; // 변경 완료

    // 사람 눈에 보이는 수준으로만 숫자를 변경한다
    requestAnimationFrame(() => {
      const increment = target > animatedNumber ? 1 : -1; // 숫자를 늘릴지 줄일지 확인한다

      setAnimatedNumber((prev) => {
        if (increment) return prev + increment > max ? max : prev + increment; // 숫자를 늘려야 할 경우 max 까지만 늘린다
        return prev + increment <= min ? min : prev + increment; // 숫자를 줄여야 할 경우 min 까지만 줄인다
      });
    });
  }, [target, min, max, animatedNumber]);

  return {
    animatedNumber,
  };
};

export default useRollingNumber;

usage

const Info = () => {
  const { experiencePercent } = useMainCharacterStore(); // // experiencePercent 숫자만큼 올리거나 내린다
  const { animatedNumber } = useRollingNumber({ target: experiencePercent, min: 0, max: 100 }); // 목표치는 최대 0, 최대 100

  return (
    <div className='info'>
      <div className='gauge'>
        <span className='graph' style={{ width: `${animatedNumber}%` }} />
        <strong className='percent'>{animatedNumber}%</strong>
      </div>
    </div>
  );
};

export default Info;

20240326