React Native의 성능과 동작 원리를 이해하기 위해 가장 중요한 스레드 모델(Thread Model)에 대해 알아보자
React Native는 기본적으로 멀티 스레드(Multi-threaded) 구조로 작동하며, 그중 핵심은 UI 스레드와 JS 스레드이다. 이 둘은 서로 다른 메모리 공간을 사용하며, 병렬로(Parallel) 실행된다.
1. UI 스레드 (Main Thread / Native Thread)
안드로이드와 iOS 앱 개발에서 말하는 표준 "메인스레드"이다. 앱이 실행되면 OS가 가장 먼저 할당하는 스레드입니다.
역할
- 네이티브 UI 렌더링 : UIView(iOS)나 android.view.View(Android)를 실제로 화면에 그린다.
- 사용자 입력 감지 : 터치(Touch), 스크롤(Scroll), 제스처(Gesture) 이벤트를 가장 먼저 수신한다.
- VSync 동기화 : 화면 주사율(60Hz/120Hz)에 맞춰 16.6ms(또는 8.3ms)마다 프레임을 갱신한다.
특징
- 이 스레드가 멈추면(Block), 앱 화면이 완전히 멈추는 프리징 현상이 발생한다.
- React Native의 View, Text, Image 컴포넌트는 결국 이 스레드에서 네이티브 뷰로 변환되어 그려진다.
2. JS 스레드 (JavaScript Thread)
React Native가 실행될 때 별도로 생성되는 스레드이다. 개발자가 작성한 JavaScript/TypeScript 코드가 실행되는 곳이다.
역할
- JS 번들 실행 : 앱 시작 시 비즈니스 로직이 담긴 번들 파일을 로드하고 실행한다.
- React 로직 처리 : React Element Tree / Fiber 트리의 변경 사항을 계산(Diffing)하고, 렌더링이 필요한 시점을 결정한다.
- API 통신 : fetch, axios 등의 네트워크 요청을 처리하고 데이터를 가공한다.
- 이벤트 처리 : UI 스레드로부터 넘어온 터치 이벤트에 대한 반응(예: onPress 함수 실행)을 수행한다.
특징
- 자바스크립트 엔진(Hermes 또는 JSC) 위에서 동작하는 싱글 스레드 이벤트 루프이다.
- 여기서 무거운 연산(예: 대용량 루프, 암호화)을 수행하면, UI 업데이트 명령을 UI 스레드로 보내지 못해 앱 반응이 느려진다.
3. 스레드 간 통신 방식 (Bridge vs JSI)
두 스레드는 메모리를 공유하지 않으므로 통신이 필요하다.
- 구형 아키텍처 (The Bridge) : 비동기 직렬화
- JS 스레드와 UI 스레드가 JSON 문자열로 메시지를 주고받는다.
- JS: "버튼 색깔 빨강으로 바꿔줘" (JSON 변환) -> Bridge -> (JSON 해석) -> UI: "OK"
- 문제점 : 스크롤처럼 빠른 데이터 전송이 필요할 때 병목(Congestion) 현상이 발생하여 프레임 드랍이 생긴다.
- 신형 아키텍처 (New Architecture / JSI): 동기 직접 호출
- JSI (JavaScript Interface)를 통해 JS가 C++ 객체(Host Object)를 참조하여 UI 스레드의 함수를 호출한다.
- JSON 변환 과정이 없고, JS가 C++ Host Object에 대한 직접 참조(reference)를 가질 수 있게 되어 즉시 반영된다.
- Reanimated나 MMKV가 빠른 이유 중 하나가 이 방식을 사용하기 때문이다.
요약
- UI 스레드 : 화면을 그리고 터치를 받는 몸체(Body). 멈추면 앱이 죽은 것처럼 보임.
- JS 스레드 : 로직을 돌리고 명령을 내리는 두뇌(Brain). 멈추면 앱이 바보가 됨(반응 없음).
- JSI 통신 방식 : Bridge의 JSON 직렬화가 사라지고, JS가 C++ 객체를 직접 참조해 함수를 호출. 동기 호출이 가능해져 병목이 크게 줄어듦.
- 관계 : JS 스레드가 "무엇을 그려라" 명령 → Fabric(C++)이 Shadow Tree 업데이트 + Yoga로 좌표 계산 → UI 스레드가 실제로 그리는 구조.
안녕하세요! 프론트엔드 개발자입니다! (2024/03 ~)