setTimeout, clearTimeout

카운트다운 로직의 핵심

---

setTimeout

• JavaScript의 내장 함수로, 일정 시간이 지난 후에 함수를 실행
• 첫 번째 인자는 실행할 함수이고, 두 번째 인자는 대기할 시간(밀리초)

clearTimeout

• setTimeout으로 설정한 타이머를 취소하는 JavaScript 내장 함수
• setTimeout은 타이머 ID를 반환하며, 이 타이머 ID를 사용하여 해당 타이머를 취소할 수 있음

코드(사용 예시)

useEffect(() => {
  const timer = setTimeout(() => {
    setTimeLeft(calculateTimeLeft());
  }, 1000);

  return () => clearTimeout(timer);
}, [timeLeft]);

작동 방식

• useEffect는 컴포넌트가 처음 렌더링된 후와 timeLeft 상태가 변경될 때마다 호출
• setTimeout 함수를 사용하여 1초 후에 setTimeLeft(calculateTimeLeft())를 실행하도록 타이머를 설정
• setTimeLeft는 calculateTimeLeft 함수를 호출하여 남은 시간을 계산하고 이를 timeLeft 상태로 업데이트
• useEffect의 반환값으로 clearTimeout(timer)를 설정하여, 컴포넌트가 언마운트되거나 timeLeft 상태가 변경될 때 기존 타이머를 정리
  => 메모리 누수 방지하고 불필요한 타이머 호출을 막아줌

요약

• 1초마다 calculateTimeLeft를 호출하여 남은 시간을 계산하고 timeLeft 상태를 업데이트하는 역할
• clearTimeout을 사용하여 이전 타이머를 정리함으로써 메모리 누수를 방지