<div id="readability-page-1" class="page"><div>
 
 <header>
 
 

 
 

 

 
 
 

 
 
 
 1 minute read
 
 
 
 


 </header>
 

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

<h2 id="code">code</h2>

<div><pre><code>import { useEffect, useState } from 'react';

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

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

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

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

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

 return {
 animatedNumber,
 };
};

export default useRollingNumber;
</code></pre></div>

<h2 id="usage">usage</h2>

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

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

export default Info;

</code></pre></div>

20240326

 
 </section>

 

 


 
 

 </div></div>

Never test

숫자를 목표치까지 빠르게 변경시키는 커스텀 훅을 만들어보았다.
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'>
 
 {animatedNumber}%
 </div>
 </div>
 );
};
export default Info;
20240326

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

댓글