본 페이지에서는 리액트네이티브에서 주로 애니메이션을 다룰 때 활용하는 SharedValue에 대해 다룹니다.
re-animated에서 사용하는 훅으로써 애니매이션을 다루기 위해 사용합니다. 여러 컴포넌트와 스크린에서 접근하거나 수정이 가능합니다. 어플리케이션의 상태나 애니메이션에 동기화가 가능하여 변경사항을 애니메이션 스크린에 적용할 때 주로 사용하게 됩니다.
내부적으로 Worklets 아키텍쳐를 사용하며 이와 관련된 특징은 크게 아래 세가지입니다.
•
Worklet
네이티브에서 동작하는 자바스크립트 함수입니다. UI 쓰레드와 독립된 컨텍스트에서 동작하며 JS쓰레드가 아닌 네이티브 쓰레드에서 직접 고성능으로 연산을 진행합니다.
Reanimated Worklet Runtime이라는 분리된 런타임환경에서 구동됩니다.
•
Native Driver
네이티브에서 애니메이션 연산을 구동하기 위해 Native Driver를 이용하여 네이티브의 성능적 이점들을 활용하게 됩니다.
•
Shared Value
SharedValue를 생성하면 네이티브에 메모리 블럭이 할당되고 변수가 저장됩니다. 메모리블럭은 같은 sharedvalue를 사용하는 모든 컴포넌트에서 공유되게 됩니다. 본 객체는 JS 쓰레드와 UI 쓰레드 모두에서 접근이 가능한 mutable한 객체입니다.
참고링크
•