[React Native] JSI Architecture

카테고리 : Development
태그: development, · React-Native · reactnative · JSI · Turbo Modules · Fabric · Codegen
등록일: 2024년 03월 13일
최근 업데이트: 2024년 03월 13일

---

• 🔥 1. 기존 아키텍처 (Bridge Architecture)
  • 1. UI thread
  • 2. Shadow thread
  • 3. JS thread
  • 세개의 Thread 간 통신은 직접적으로 이루어지지 않고 Bridge를 통해 이루어짐
• 🔥 2. JSI Architecture
  • 1. JS와 Native의 직접적인 상호작용
  • 2. Turbo Modules의 Lazy Load
• 🔥 3. JSI 아키텍처로 가져올 수 있는 변화
  • 1. 기존 아키텍처의 병목 지점 해결
  • 2. Fabric
  • 3. Turbo Modules
• 🔥 4. Codegen
  • Facebook의 Codegen
• 🔥 5. 정리

🔥 1. 기존 아키텍처 (Bridge Architecture)

1. UI thread

• 메인 애플리케이션으로 안드로이드와 IOS에서 View를 렌더링

2. Shadow thread

• Background Thread로 랜더링 전에 Yoga 패키지로 각 요소의 레이아웃을 계산

3. JS thread

• React Native 로직을 담당 , 번들링 된 자바스크립트 코드 실행

세개의 Thread 간 통신은 직접적으로 이루어지지 않고 Bridge를 통해 이루어짐

데이터는 JSON 형태로 이동되고 직렬화(Serialisation) 역직렬화 (Deserialisation)로 무거운 작업을 통해 이루어짐

• Bridge를 이용한 JSON 데이터 전송은 불필요한 카피가 발생

• 비동기식 작업으로 이루어져서 Bridge가 혼잡해짐

• 자바스크립트와 네이티브 쪽이 서로 직접 연결될 수 없고, 또 비동기식 JSON 메시지에 의존함
• 모듈이 앱 첫 실행에 모두 로드되는데 이건 앱의 초기 구동 성능에 악영향을 끼침
• 유저의 터치에 대한 반응이 우선순위를 두고 처리되지 않고 진행되어 느림
• Bridge가 Serialisation로 인해 느림
• UI 요소에 디렉트로 JS thread 가 접근 불가

🔥 2. JSI Architecture

1. JS와 Native의 직접적인 상호작용

• JS와 C++ 간 인터페이스로 상호 간 직접 커뮤니케이션이 가능함
• 정리하자면 자바스크립트 컨텍스트 안에서 네이티브 객체를 사용 할 수 있음

2. Turbo Modules의 Lazy Load

• 기존 아키텍처에선 모듈을 첫 실행에 모두 로드 했다면 Turbo Modules는 필요할 때만 로드가 가능

🔥 3. JSI 아키텍처로 가져올 수 있는 변화

1. 기존 아키텍처의 병목 지점 해결

• 자바스크립트에서 네이티브 객체 등 직접 메소드 호출 가능해져서 직접 커뮤티케이션이 가능해짐

2. Fabric

• Facebook이 C++로 만든 렌더링 시스템
• UI Manager가 직접 shadow Tree를 C++안에서 생성 할 수 있 음 (속도 개선)
• 동기식 작업 / 쓰레드 세이프 방식으로 Javascript renderer (C++)를 실행 할 수 있음
• 자바스크립트의 변수를 직접 호출을 할 수 있어서 데이터 직렬화가 훨씬 줄어듬

3. Turbo Modules

• 유저의 행동을 우선순위를 두어 대응 가능해짐
• 전체적인 앱 반응 속도 개선

🔥 4. Codegen

Facebook의 Codegen

• 자바스크립트와 네이티브 사이드 쪽의 타입 체커로 기존 느슨한 타이핑을 강력한 타이핑을 통해 정확한 타입이 전달됌
• 새 아키텍처에서는 자바스크립트 코드에서 any 타입을 쓸 수 없음

🔥 5. 정리

• 자바스크립트 코드가 네이티브 UI 요소의 레퍼런스를 가질 수 있고 메소드도 직접 호출할 수 있음.
• 네이티브 코드에 직접 바인딩 되어 속도가 향상됨.
• JavaScript Core 엔진 말고 다른 엔진도 사용 가능, 실제 Hermes 엔진을 사용하고 있음.
• 네이티브 모듈을 처음에 모두 다 로드하지 않고 필요할 때 로드하는 방식.
• 정적 타입 체킹으로 자바스크립트와 네이티브 코드 간 호환성 강화.