React Native Reanimated

React-Native-Reanimated ?

UI Thread에 동작하는 부드러운 애니메이션과 인터렉션을 쉽게 만들 수 있다.

부드러운 애니메이션이란? 초당 60프레임의 화면 전환이 필요하고, 이를 위해서는 16밀리초 내에 프레임이 렌더링되어야 한다.

RN에서 기본적으로 제공하는 Animated API를 사용하는 것은?

https://reactnative.dev/docs/animations

해당 API를 사용하면 애니메이션의 계산을 UI ThreadJS Thread의 커뮤니케이션의 의존해야 한다.

그리고 두 쓰레드 간의 통신은 비동기로 이루어지는데, response가 16밀리초 이내에 오는 것을 보장할 수 없다. 특히 모바일의 성능이 떨어지는 경우 시간이 더 지연될 수 있다.

Untitled

그렇다면 Reanimated는?

위에서 말했다시피 reanimated는 모든 애니메이션 관련 로직을 UI Thread에서 실행하여 부드러운 애니메이션이 가능하다.

JS Thread에서 무거운 작업을 진행하더라도 프레임 드랍이 일어나지 않는다.

프레임 드랍 : 부드러운 화면은 초당 60프레임이라 했는데 이 이하로 떨어지면 화면이 느리거나, 버퍼링이 생기는 등 (렉걸렸을 때!!)의 현상을 의미한다.

JavaScript의 Worklet 함수에 정의 기술 된 내용을 토대로 UI Thread에 작업내용이 전달되어 처리된다.

그래서 Reanimated가 제공하는 함수의 역할은?

sharedValue

value 값을 담당하는 sharedValue 메서드는 JS thread와 UI thread에서 동시에 read-write가 가능한 값을 생성한다.

RN에서 제공하는 Animated.values와 유사하며, sharedValue의 값은 .value로 접근 가능하다.