[React] 인증번호 타이머 만들기

안녕하세요. 이번 시간에는 React로 인증번호 타이머를 만들어보겠습니다.

 

React 함수 컴포넌트로 만들었습니다.

 

1. 소스 코드

import React, { useState, useEffect } from 'react';

function AuthNumTimer() {
    // 초기 타이머 시간 (초)을 정의함. 180초, 3분.
    const initialTime = 180;
    // 남은 시간을 상태로 관리함.
    const [remainingTime, setRemainingTime] = useState(initialTime);

    useEffect(() => {
        // useEffect를 사용하여 컴포넌트가 마운트될 때 타이머 시작.
        const timer = setInterval(() => {
            // 남은 시간이 0보다 크면 1초씩 감소시킴.
            if (remainingTime > 0) {
                setRemainingTime((prevTime) => prevTime - 1);
            } else {
                // 남은 시간이 0이 되면 타이머 정지.
                clearInterval(timer);
            }
        }, 1000);

        // 컴포넌트가 언마운트되면 타이머 정지
        return () => clearInterval(timer);
        
    }, [remainingTime]); // remainingTime이 변경될 때마다 useEffect가 다시 실행됨.

    // 시간을 분과 초로 변환하는 함수 정의.
    const formatTime = (timeInSeconds) => {
        const minutes = Math.floor(timeInSeconds / 60);
        const seconds = timeInSeconds % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    };

    // 재전송 버튼을 클릭했을 때 호출되는 함수 정의.
    const handleResendClick = () => {
        // 남은 시간을 초기값으로 설정하여 타이머 재설정.
        setRemainingTime(initialTime);
    };

    return (
        <div>
            {/* 인증번호 유효 시간을 화면에 출력. */}
            <h1>인증번호 유효 시간: <span style={{ color: 'red' }}>{formatTime(remainingTime)}</span></h1>
            
            {/* 재전송 버튼을 추가하고, 스타일을 지정. */}
            <button onClick={handleResendClick} style={{ 
                padding: '10px 15px',
                fontSize: '16px',
                backgroundColor: 'blue',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer',
                marginTop: '10px',
            }}>
                재전송
            </button>
        </div>
    );
}

export default AuthNumTimer;

 

 

2. 결과