📍 setTimeout

Function Component에서 Hook을 이용하여 state 관리를 진행한다. 이 때, setTimeout을 사용하면 일정 시간 후 코드를 비동기적으로 실행할 수 있다.
setTimeout은 JavaScript에서와 마찬가지로 React에서도 동일하게 작동한다.

setTimeout(() => console.log('Initial timeout!'), 1000);

이 함수는 두 개의 인자를 받으며, 첫 번째는 실행하려는 콜백 함수이고, 두 번째는 함수가 호출되기 전의 시간 초과를 밀리초 단위로 지정한다.

useEffect(() => {
  const timer = setTimeout(() => console.log('Initial timeout!'), 1000);
}, []);

이와 같이 component가 마운트될 때 제한시간을 한 번 실행하려면 useEffect를 사용해야 하며, 이때 재렌더링을 고려하여 함수 component의 아무 곳에나 배치하지 않도록 주의해야 한다.
useEffect() 함수 끝부분에 대괄호[]를 집어넣을 수 있는데, 여기에 state(여러 개도 가능)를 넣을 수 있다. 대괄호[]는 일종의 실행 조건으로, 만약에 위 코드에서 [click]을 넣으면 click 이라는 이름의 state가 변경이 될 때만 업데이트를 실행해 달라고 전달하는 것이다.

clearTimeout

setTimeout 타이머를 사용한 경우 타이머를 해제해야 한다.

useEffect(() => {
  const timer = setTimeout(() => console.log('Initial timeout!'), 1000);
  return () => clearTimeout(timer);
}, []);

useEffect() 안에 return()을 추가하면 component가 사라질 때 특정 코드를 실행할 수 있다. 여기에 clearTimeout을 추가하면 타이머를 바로 해제할 수 있다.

📍 setInterval

setTimeOut과 비슷한 함수로, 지정한 밀리초 주기마다 함수를 반복적으로 호출하는 함수이다. setTimeout처럼 setInterval도 clearTimeout 메서드를 사용하여 계획된 함수의 실행을 취소할 수 있도록 타이머 ID값을 반환할 수 있다.

  useEffect(()=>{
    let timer = setInterval(()=>{ alertSet(false) }, 2000);
  });    

위 코드는 2초마다 setInterval()이 계속해서 실행되게 된다.

setTimeout : 일정 시간 후에 해당 func 실행하는 함수
setInterval : 시간마다 주기적으로 해당 func 실행하는 함수

🪄 마치면서

setTimeout 문법을 보니 문득 이것저것 찾아보다 발견하고 그 당시에는 이해도 못하고 썼던 기억이 떠올랐다. JSX에도 이렇게 시간을 잘 다룰 수 있는 메서드들이, 특히 주기적으로 실행되는 메서드도 존재한다는 것이 정말 유용하게 쓰일 수 있을 것 같다.