[React] 카운트 다운 함수 ( moment 라이브러리 사용 )

입력 시간을 받아 카운트 다운을 해주는 함수다.

moment 라이브러리를 사용해 구현하였음!

    const countDownTimer = useCallback((date) => {
        let _vDate = moment(date);
        let _second = 1000;
        let _minute = _second * 60;
        let _hour = _minute * 60;
        let _day = _hour * 24;
        let timer;

        function showRemaining() {
            try {
                let now = moment();
                let distDt = _vDate - now;

                if (distDt < 0) {
                    clearInterval(timer);
                    let HapDate = '0' + 'd ' + '0' + 'h ' + '0' + 'm ' + '0' + 's';
                    document.getElementById('timer').innerHTML = HapDate;
                    return;
                }
                let days = Math.floor(distDt / _day);
                let hours = Math.floor((distDt % _day) / _hour);
                let minutes = Math.floor((distDt % _hour) / _minute);
                let seconds = Math.floor((distDt % _minute) / _second);

                let HapDate = parseInt(days) + 'd ' + parseInt(hours) + 'h ' + parseInt(minutes) + 'm ' + parseInt(seconds) + 's';
                document.getElementById('timer').innerHTML = HapDate;
            }
            catch (e) {
                console.log(e);
            }
        }
        timer = setInterval(showRemaining, 1000);
    }, []);

 

위 함수를 아래에서 불러 사용한다.

<span id="timer">{countDownTimer('2021-11-15')}</span>

아래와 같은 카운트 다운 기능이 구현됐다.