개발 노트

setInterval 외부에서 정지 시킬 때 본문

React

setInterval 외부에서 정지 시킬 때

알 수 없는 사용자 2023. 2. 27. 17:00
const handleSaveClick = async () => {
    setIsModalOpen(true);
    reset();
    //progressbar 진척도 나타내는 곳
    let count = countTime;
    refTimer.current = setInterval(() => {
      count = count - 1;
      percent !== 0 ? setPercent((num) => count) : null;
      if (count <= 0) {
        clearInterval(refTimer.current);
        setPercent(11);
      }
    }, 1000);

위와 같이 어떤 함수 내에 존재하는 setInterval을 정지시키기 위해서는 useRef를 사용해 직접적으로 DOM을 건드려주면 된다.

외 직접적으로 해야되나? interval을 한번 작동하면 외부의 것을 참조하지도 않고 그 것을 멈춰주는 clear를 또 다른 함수내에 넣어서 사용을 하게 될텐데 그렇다면 clear의 상위에는 setInterval가 존재하지않기에 그렇다.