진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기(2)

2023.12.07 - [리액트] - 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기

이 글은 위 글과 이어집니다.

 

 

프로그래스 바는 잘 구현을 했고 저 프로그래스 바 퍼센테이지 안에서 3개의 API를 구현해야한다.
그런데 어떤 API는 좀 오래걸리는 API가 있고, 또 어떤 API는 빠르게 결과값이 오는 API가 있어서 속도를 조절해주는게 필요했다. 

 

import { useEffect, useState } from 'react';

const usePercentage = (
  isLoading: boolean,
  isSuccess: boolean,
  startPercent: number = 0,
  targetPercent: number = 100,
  speed: number = 250
) => {
  const [percentage, setPercentage] = useState(startPercent);
  useEffect(() => {
    if (isLoading) {
      if (percentage < targetPercent) {
        setTimeout(() => setPercentage((prev) => prev + 1), speed);
      }
    }
  }, [isLoading, percentage, setPercentage, targetPercent, speed]);

  useEffect(() => {
    if (isSuccess) {
      if (percentage < targetPercent) {
        setTimeout(() => setPercentage((prev) => prev + 1), 10);
      }
    }
  }, [isSuccess, percentage, setPercentage, targetPercent]);
  return {
    percentage
  };
};

export default usePercentage;

 

이렇게 구현해서 react-query와도 잘 융합될 수 있도록 처리하였다!
API를 호출할 때는 hook의 인자를 통해서 속도를 조절하고 요청이 완료될 경우에는 10ms의 빠른 속도로 진행률이 차올라 상대적으로 빨라보일 수 있도록 UX를 개선시켰다.

 

게다가 startPercent와 endPercent를 받을 수 있도록 하여 특정 퍼센트 까지만 속도를 조절하는 것도 가능하도록 설계하였다.