Jan 23, 2021 - 타이머가 뭐라고...

*1월23일

-휴대폰 인증번호 관련 타이머 구현에 시간을 너무 소비했다. 일전에 커스텀으로 작업해보기도 했고... react-countdown이라는 라이브러리가 잘 짜여져있어서 이걸 사용하면 금방 할 수 있을 것이라고 생각했는데, 인증번호 input 값 입력과 동시에 타이머가 함께 리렌더링 되는 문제 때문에 골머리를 앓았다. react memo, useMemo등을 사용해보며 삽질을 했고.... -> 결론은 use-timer라는 라이브러리로 해결했다.

 

-use-timer는 sec, min을 구분해서 제공해주지 않아, onTimerOver, onTimeUpdate와 같은 callback function을 이용해서 조작해야했다. 

 

https://www.npmjs.com/package/use-timer

yarn add use-timer

import { useTimer } from "use-timer";

 

  const {
    time: sec,
    start: secStart,
    reset: secReset,
    pause: secPause,
  } = useTimer({
    initialTime: 60, // 60초 마다 루프
    interval: 1000, // mil sec로 동작
    timerType: "DECREMENTAL",
    endTime: 0, // endTime에 도달 했을 때 onTimerOver callback이 트리거 됨 
    autostart: false,
    onTimeOver: () => {
      secReset();
      secStart();
    },
    onTimeUpdate: () => {
      if (sec === 59) {
        setMinView(minView - 1); // min에 대한 view는 그냥 useState로 처리
      }
      if (sec === 60 && minView === 0) {
        secPause(); // 0:00에 멈추도록 처리
      }
    },
  });