Skip to main content

타이머

타이머는 애플리케이션에서 중요한 부분이며, React Native는 브라우저 타이머를 구현한다.

타이머​

자바스크립트는 다양한 타이머 함수를 제공한다. 각 함수는 특정 시점에 코드를 실행하거나 반복 실행하는 데 사용된다.

  • setTimeout, clearTimeout
  • setInterval, clearInterval
  • setImmediate, clearImmediate
  • requestAnimationFrame, cancelAnimationFrame

requestAnimationFrame(fn)은 setTimeout(fn, 0)과 다르다. requestAnimationFrame은 모든 프레임이 처리된 후에 실행되지만, setTimeout은 가능한 한 빨리 실행된다. 예를 들어, iPhone 5S에서는 1초에 1000번 이상 실행될 수 있다.

setImmediate는 현재 자바스크립트 실행 블록이 끝나는 시점, 즉 네이티브로 배치 응답을 보내기 직전에 실행된다. setImmediate 콜백 내에서 setImmediate를 다시 호출하면, 즉시 실행된다. 이 경우 네이티브로 제어권을 넘기지 않는다.

Promise 구현은 비동기 처리를 위해 setImmediate를 사용한다.

note

안드로이드 디버깅 시, 디버거와 디바이스의 시간이 차이가 나면 애니메이션이나 이벤트 동작 등이 제대로 작동하지 않거나 결과가 정확하지 않을 수 있다. 이 문제를 해결하려면 디버거 머신에서 adb shell "date \date +%m%d%H%M%Y.%S%3N`"` 명령어를 실행한다. 실제 디바이스에서 사용하려면 루트 접근 권한이 필요하다.

InteractionManager​

잘 만들어진 네이티브 앱이 부드럽게 느껴지는 이유 중 하나는, 상호작용과 애니메이션 중에 부하가 큰 작업을 피하기 때문이다. React Native에서는 현재 단일 JS 실행 스레드라는 제약이 있지만, InteractionManager를 사용해 상호작용이나 애니메이션이 끝난 후에 오래 걸리는 작업이 실행되도록 스케줄링할 수 있다.

애플리케이션은 다음과 같이 상호작용이 끝난 후에 실행될 작업을 스케줄링할 수 있다:

tsx
InteractionManager.runAfterInteractions(() => {
  // ...오래 걸리는 동기 작업...
});

이를 다른 스케줄링 방법과 비교해 보자:

  • requestAnimationFrame(): 시간에 따라 뷰를 애니메이션하는 코드에 사용한다.
  • setImmediate/setTimeout/setInterval(): 나중에 코드를 실행하지만, 애니메이션을 지연시킬 수 있다.
  • runAfterInteractions(): 활성 애니메이션을 지연시키지 않고 나중에 코드를 실행한다.

터치 처리 시스템은 하나 이상의 활성 터치를 '상호작용'으로 간주하며, 모든 터치가 끝나거나 취소될 때까지 runAfterInteractions() 콜백을 지연시킨다.

InteractionManager는 또한 애플리케이션이 애니메이션 시작 시 상호작용 '핸들'을 생성하고, 완료 시 이를 해제함으로써 애니메이션을 등록할 수 있게 한다:

tsx
const handle = InteractionManager.createInteractionHandle();
// 애니메이션 실행... (`runAfterInteractions` 작업이 큐에 추가됨)
// 나중에, 애니메이션이 완료되면:
InteractionManager.clearInteractionHandle(handle);
// 모든 핸들이 해제되면 큐에 있던 작업이 실행됨