Easy is Perfect

[React/Javascript] Js에서 동작하는 setInterval/setTimeout 함수 중지/제거하는 방법(clearInterval, clearTimeout, unMount, useEffect)

  • melonicedlatte
  • Jan 27, 2023


1. 문제

JS 나 React 를 사용할 때, setInterval/setTimeout 함수를 자주 사용하게 됩니다. 사용하던 두 함수를 필요 없는 시점에는 제거해야 하는데요. 예를 들어, React 같은 경우에는 컴포넌트가 마운트 될 때 동작시키고, 언마운트 될 때 제거하고 싶을 수 있을 것입니다. 이 때, 동작하고 있는 setInterval, setTimeout 를 중지하고 싶을 때 어떻게 해야 할까요?

2. 해결방법

image

image

setInterval/setTimeout 함수를 호출하면 id를 return 해줍니다. 이 id 를 clearInterval, clearTimeout 에 각각 넣어주면 손쉽게 동작하고 있는 setInterval/setTimeout 함수를 제거할 수 있습니다.

// interval
const intervalId = setInterval(intervalFun, 1000);
clearInterval(intervalId);

// timeout
const timeoutId = setTimeout(timeoutFun, 1000);
clearTimeout(timeoutId);

위와 같이 setInterval/setTimeout 을 선언한 후에, 제거하고 싶은 시점에 clearInterval, clearTimeout 함수 내부에 id 값을 넣어 주면 손쉽게 제거할 수 있습니다.

// React
useEffect(() => {
  const intervalId = setInterval(intervalFun, 1000);
  const timeoutId = setTimeout(timeoutFun, 1000);

  return(() => {
    clearInterval(intervalId);
    clearTimeout(timeoutId);
  });
},[]);

예를 들어, React 같은 경우에는 컴포넌트가 마운트 될 때 동작시키고, 언마운트 될 때 제거하고 싶을 수 있을 것입니다.

위에서 예시로 든 케이스의 경우에는 위의 예제와 같이 사용하면 손쉽게 setInterval/setTimeout 를 제거할 수 있습니다.




Search