• 휴대폰 인증 같은 경우 3분 안에 입력해야 하는데 사용자들의 편의를 위해서 03:00에서 0:00으로 1초마다 초가 줄어드는 UI를 많이 사용합니다.
  • requestAnimationFrame을 이용해 이를 구현합니다.
import moment from 'moment';
import { Component } from 'react';

interface Props {}

interface State {
	timeDiff?: number;
}

const TIME_LIMIT = 180;

class App extends Component {
	initTime: number;

	startTimer() {
		const updateTime = () => {
			const currentTime = Date.now();
			let timeDiff = TIME_LIMIT;
			if (currentTime - this.initTime >= 1000) {
				timeDiff =
					TIME_LIMIT - Math.floor((currentTime - this.initTime) / 1000);
				this.setState(timeDiff);
			}
			if (timeDiff > 0) {
				requestAnimationFrame(() => updateTime());
			}
		};
		requestAnimationFrame(() => updateTime());
	}

	render() {
		return (
			<>
				{timeDiff && (
					<span className="text-danger">
						{moment(timeDiff).format('mm:ss')}
					</span>
				)}
			</>
		);
	}
}