Worklets - React Native Reanimated

Worklets

Worklets의 궁극적인 목표는 뷰 속성을 업데이트하거나 UI 스레드에서 이벤트에 반응할 때 실행되는 작은 JavaScript 코드를 정의하는 것입니다. 이러한 목적에 대한 JavaScript에서 자연스러운 구성 요소는 간단한 함수였습니다. Reanimated를 사용하면 UI 스레드에 보조 JS 컨텍스트를 생성하고 JavaScript 함수를 실행할 수 있습니다. 유일한 필수 조건은 해당 함수가 맨 위에 "worklet" 지시문을 가져야 한다는 것입니다

function someWorklet(greeting) {
  'worklet';
  console.log("Hey I'm running on the UI thread");
}

 

함수는 우리의 필요에 맞는 훌륭한 구성 요소입니다. 실행되는 코드와 인수를 전달하여 통신할 수 있습니다. 각 worklet 함수는 코드에서 그 함수를 호출하면 주 메인 React Native 스레드에서 실행될 수 있으며, 또는 runOnUI를 사용하여 UI 스레드에서 실행할 수 있습니다. 호출자의 관점에서 UI 실행은 비동기적으로 진행됩니다. 인수를 전달할 때는 해당 인수가 UI JS 컨텍스트로 복사됩니다.

function someWorklet(greeting) {
  'worklet';
  console.log(greeting, 'From the UI thread');
}

function onPress() {
  runOnUI(someWorklet)('Howdy');
}

 

인수 외에도 함수는 정의된 컨텍스트를 포착합니다. 따라서 worklet 범위 외부에서 정의되었지만 worklet 내부에서 사용되는 변수도 인수와 함께 복사되어 사용할 수 있습니다(이를 "capturing given params"라고 합니다).

const width = 135.5;

function otherWorklet() {
  'worklet';
  console.log('Captured width is', width);
}

 

Worklet은 다른 worklet에서 캡처(또는 인수로)할 수 있으며, 이 경우 호출될 때 UI 스레드에서 동기적으로 실행됩니다.

 

 

function returningWorklet() {
  'worklet';
  return "I'm back";
}

function someWorklet() {
  'worklet';
  let what = returningWorklet();
  console.log('On the UI thread, other worklet says', what);
}

 

그리고 이건 정규 메서드에서도 동작합니다. 실제로 console.log는 UI JS 컨텍스트에 정의되지 않았지만 React Native JS 컨텍스트가 제공하는 메서드에 대한 참조입니다. 따라서 이전 예제에서 console.log를 사용할 때 실제로는 React Native 스레드에서 실행되었습니다.

function callback(text) {
  console.log('Running on the RN thread', text);
}

function someWorklet() {
  'worklet';
  console.log("I'm on UI but can call methods from the RN thread");
  runOnJS(callback)('can pass arguments too');
}

 

Hooks 사용하기

실제로 Reanimated를 사용하여 애니메이션 및 상호작용을 작성할 때 'worklet' 지시문을 사용하여 worklet을 생성해야 할 일은 거의 없을 것입니다(Example/ 폴더를 살펴보면 지시문의 사용량이 많지 않음을 알 수 있습니다). 대신에 대부분의 경우 Reanimated API 중 하나의 훅으로 생성할 수 있는 worklet을 사용할 것입니다. 예를 들어 useAnimatedStyle, useDerivedValue, useAnimatedGestureHandler 등입니다. Reanimated API 참조에서 나열된 훅 중 하나를 사용할 때는 자동으로 제공된 메서드가 worklet임을 감지하고 지시문을 명시하지 않아도 됩니다. 훅에 제공된 메서드는 자동으로 worklet으로 전환되어 UI 스레드에서 실행됩니다.

const style = useAnimatedStyle(() => {
  console.log("Running on the UI thread");
  return {
    opacity: 0.5
  };
});