[Project/Nextjs] Countdown Timer

For

• 휴대폰 인증 페이지를 구현 하면서 인증번호 발송 시, 5분의 타이머를 구현해야 했다. 구글링을 해보니, setInterval() method에 대한 정보를 찾을 수 있었다.
  MDN 에 따르면 setInterval() metho에 대한 설명을 다음과 같이 한다

"The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call."
출처: https://developer.mozilla.org/en-US/docs/Web/API/setInterval

setInterval() method은 함수 혹은 코드 블락을 특정한 시간차를 두고 반복해서 호출한다 정도로 해석 할 수 있겠다.

How

• 5분의 타이머를 만들어야 하므로 우선 integer value 를 가진 분과 초, 그리고 타이머를 키고 끄는 boolean value 를 가진 state을 만들었다.

    if (
      !/^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/.test(typedPhoneNumber)
    ) {
      setIsNumberValid(false);
    } else {
      setIsNumberValid(true);
    }

• 사용자가 입력한 핸드폰 번호를 regex 를 통해 validate 하고, validation을 거친 핸드폰 번호의 입력이 완료 되면 인증요청을 할 수 있도록 했다.

• 인증코드를 사용자가 입력한 핸드폰으로 발송하는 API를 호출 후, status_code 가 200으로 돌아오면 alert 창을 띄운 후, 타이머가 돌게끔 하는 state 에 true값을 줬다.

• 타이머를 실행시키는 코드는 다음과 같이 구현했다.

  useEffect(() => {
    if (isStartTimerOn === true) {
      let myInterval = setInterval(() => {
        if (seconds > 0) {
          setSeconds(seconds - 1);
        }
        if (seconds === 0) {
          if (minutes === 0) {
            clearInterval(myInterval);
            setIsStartTimerOn(false);
          } else {
            setMinutes(minutes - 1);
            setSeconds(59);
          }
        }
      }, 1000);
    }
    return () => {
      clearInterval(myInterval);
    };
  });
  
  

• setInterval method은 특정 함수나 code snippet 을 정해진 시간 지연을 가지고 계속 호출한다.