[React] timer (OTP 창 만들기)

timer 및  Modal을 사용하여 OTP 창 만들기

    /*값이 변경 될 때마다 useEffect()가 작동하도록 state 사용*/
    const [counter, setCounter] = useState(props.timmer ? props.timmer : 300);

    /*setInterval() 선언 */
    useEffect(() => {
        const timer = counter > 0 && setInterval(() => setCounter(counter - 1), 1000);
        if (timer === 0) {
            props.setShow(false);
        }
        return () => clearInterval(timer);
    }, [counter]);

    /*300초 ->  05:00 형식으로 변환 */
    const toHHMMSS = (e) => {
        var myNum = parseInt(e, 10);
        var hours = Math.floor(myNum / 3600);
        var minutes = Math.floor((myNum - hours * 3600) / 60);
        var seconds = myNum - hours * 3600 - minutes * 60;

        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        return +minutes + ":" + seconds;
    };