들어가며

React Native 스레드 모델

┌─────────────────────────────────────────┐
│            JS Thread                    │
│  - Your React components                │
│  - State updates, business logic        │
│  - Event handlers                       │
│  - The old Animated API calculations    │
└─────────────┬───────────────────────────┘
              │
              │  ◄── 브릿지 (비동기 직렬화 JSON) ──►
              │
┌─────────────▼───────────────────────────┐
│            UI Thread                    │
│  - Layout & rendering                   │
│  - Native view updates                  │
│  - Touch event processing               │
│  - What actually draws to the screen    │
└─────────────────────────────────────────┘

Bridge : 비동기, 직렬화 그리고 피할 수 없는 비용

터치 발생(UI 스레드) 
        │ 
        ▼ 
onGestureEvent 발생(UI 스레드) 
        │ 
        │ ── JSON으로 직렬화 ──► 
        ▼ 
JS 이벤트 핸들러 호출(JS 스레드) 
        │ 
        ▼ 
Animated.setValue() 호출(JS 스레드) 
        │ 
        │ ── 업데이트된 값을 다시 직렬화 ──► 
        ▼ 
네이티브 뷰 업데이트됨(UI 스레드) 
        │ 
        ▼ 
프레임 렌더링됨(UI 스레드)

기존의 Animated API는 어떻게 해결하려 했는가

// 네이티브 드라이버 — JS 스레드가 애니메이션 타이밍을 설정합니다
Animated.timing (opacity, { 
  toValue : 1 , 
  duration : 300 , 
  useNativeDriver : true , // ← 이것이 핵심 
}). start ();

• opacity

• transform (translate, scale, rotate)

• 손가락을 따라 카드가 움직이고

• 손을 떼면 스프링 물리 효과로 특정 위치에 정착하고

• 얼마나 멀리 드래그했는지에 따라 색상이 변경되고

• 손가락의 속도에 따라 카드를 닫을지 결정하는

Reanimated의 아키텍쳐

1. UI Thread에서 실행되는 별도의 JavaScript Runtime - JSI(JavaScript Interface)를 통해 동작하는 별도의 JavaScript 엔진입니다. 메인 JS Thread와 완전히 독립적으로 실행되며, 네이티브 렌더링 루프와 동기적으로 실행될 수 있습니다.

2. Worklet - UI Thread Runtime으로 전달되어 실행되는 작은 JavaScript 함수입니다. Worklet은 변환된 형태로 UI Thread Runtime에 전달되고, 각 프레임에 맞춰 동기적으로 실행됩니다.

┌─────────────────────────────────────────────┐
│           Main JS Thread (React)            │
│  - Your components, state, business logic   │
│  - Defines worklets and shared values       │
│  - Communicates via SharedValue refs        │
└──────────────────┬──────────────────────────┘
                   │
                   │  JSI (동기식, 직렬화 없음)
                   │
┌──────────────────▼──────────────────────────┐
│        UI Thread (Reanimated Runtime)       │
│  - Second JS engine (Hermes / V8)           │
│  - Worklets execute here                    │
│  - Direct access to native view props       │
│  - Runs in sync with the render loop        │
│  - Zero bridge crossings during animation   │
└─────────────────────────────────────────────┘

JSI가 이 구조를 어떻게 바꾸는가

• Bridge : 비동기 메세지 큐 기반 통신, JSON 직렬화를 통한 데이터 전달, 서로 다른 스레드 간 비동기 통신 및 1~2프레임 이상의 지연 발생 가능

• JSI : 동기 함수 호출, C++ 객체를 직접 참조, 동일한 스레드에서 직접 접근, 함수 호출 수준의 지연(사실상 없음)

SharedValue<number> (C++ heap, one object two readers)
        ▲                    ▲
        │ JSI read/write     │ JSI read/write
        │                    │
Main JS Thread          UI Thread Runtime
(React components)      (Worklets / animation loop)

흔한 오해: "Reanimated는 단순히 네이티브로 옮기는 것이다"

"메인 JS Thread에서 실행되는 무언가가 Worklet 안으로 들어오고 있는 것은 아닐까?"

Part 1 정리

• React Native는 JavaScript를 UI Thread와 분리된 별도의 JS Thread에서 실행합니다.

• JS Thread와 UI Thread는 기존에 Bridge를 통해 통신했으며, 비동기적인 메시지 전달과 JSON 직렬화 과정에서 비용이 발생했습니다.

• 이러한 구조는 제스처 기반 애니메이션처럼 매 프레임 빠르게 응답해야 하는 상황에서 병목이 될 수 있습니다.

• useNativeDriver: true는 애니메이션을 UI Thread로 옮겨 이 문제를 어느 정도 해결했지만, 애니메이션할 수 있는 속성과 동작에 한계가 있었습니다.

• Reanimated는 애니메이션 값뿐만 아니라 애니메이션 로직 자체를 UI Thread로 옮기는 방식을 선택했습니다.

• 이를 위해 UI Thread에서 동작하는 별도의 JavaScript Runtime과 Worklet을 사용합니다.

• JSI는 JavaScript와 C++ 사이에서 동기적인 직접 접근을 가능하게 하며, Reanimated의 SharedValue와 UI Thread 기반 실행 구조를 가능하게 하는 핵심 기술입니다.

다음 글에서는

원문

React Native Reanimated Internals, Part 1: Why the JS Thread Is the Enemy of Smooth Animations

I used to think I understood React Native animations. I’d reach for Animated.timing, wire up an interpolation, and pat myself on the back…

https://medium.com/@debdut.saha.1/react-native-reanimated-internals-part-1-why-the-js-thread-is-the-enemy-of-smooth-animations-e9b69b9a33bf