개인프로젝트[항해캡슐(Timer 초기화)]

오늘은 인증번호 발송 후 3분내에 입력을 못하거나 메일이 안왔을 경우 재 발 송 이라는 버튼을 눌렀을때 3분 타이머가 

초기화되어 다시 3분으로 리셋되는걸 만들었다.

 

이것도 엄청 찾아 헤매긴 했는데 

 

일단 useState로 재발송을 눌렀을때 렌더링되도록 하고

  const [timerKey, setTimerKey] = useState(0);

재발송 버튼에 온클릭 이벤트로 

  const toggleTimer = () => {
    setTimerKey(timerKey + 1);
    //key값이 달라져서 렌더링되버려서 타이머가 초기화 되는방식
    setIsTimeOver(false);
    setTimerActive(true);
  };

해당 코드로 setTimeKey에 timerKey가 0일때 + 1을해서 key갑이 달라져 렌더링이 되버려서 타이머가 초기화 되는 방식이였다.

 

타이머가 초기화되면 setIsTimeOver로 타이머를 멈췄다가 setTimerActive로 타이머를 다시 작동시키는 원리이다.

 

 

 

이제 진짜 얼마 안남았긴 한데.. 서버가 완성되면 내가 정상적으로 API연동을 이루어내서 정상 작동될지..그게 제일 걱정이다 ㅠㅠ