[React] 하이브리드 앱 - 타이머 오류

하이브리드 앱으로 개발하여 타이머를 쓰게되는 경우
일정 시간이 흐른뒤 앱이 sleep 상태로 가게되고, 이런 경우 setInterval과 같이 주기적으로 함수가 수행이 원활하게 되지 않는 현상이 있었다.

https://stackoverflow.com/questions/32088711/timerssetinterval-in-ionic-apps-go-to-sleep-after-some-time-in-the-background

동일한 상황이었고, 답변을 통해 수정을 했다

기존 소스

const startTimer = () => {
	setInterval(() => {
		setCount((count) => count + 1)
	}, 1000)
}

기존 소스에서의 현상
setInterval를 통해 매초마다 setCount...가 수행되어 1초씩 더해감
앱이 sleep 상태에 빠지면, 함수가 호출되는것이 멈춤
사용자가 잠금해제하면, 멈추기 직전 상태가 이어져서 계속됨
결과적으로 잠금(혹은 sleep)상태일 때는 setCount가 이루어지지 않음

수정된 소스

const startTimer = () => {
	let preTickTimestamp = Date.now()
	setInterval(() => {
		let currentTickTimestamp = Date.now()
		let delta = currentTickTimestamp - preTickTimestamp
		preTickTimestamp = currentTickTimestamp
		setCount((count) => count + Math.round(delta / 1000))
	}, 1000)
}

더해나가는 값을 1로 고정하는것이 아닌,
현재시간 - 과거시간을 통해 1초를 계산해서 더해준다

앱이 잠금상태가 될 때, 과거시간이 변수에 저장됨
해제될 때, 현재시간과 과거시간의 차이값으로 흘러간 시간값을 더해줌

이렇게함으로써 해결!

단, 세밀한 시간 오차는 생길 수 있으므로, 중요하게 동작해야하는 경우 interval 주기를 짧게해서 해결해야할듯하다