[React Native] React Native는 더이상 bridge방식을 이용하지 않는다.

1. 개요

React Native는 그동안 bridge방식을 이용해 iOS, Android cross platform을 구현했다.

하지만 최신 React Native는 더이상 bridge방식을 이용하지 않고 JSI(Javascript Interface)를 이용한다.

이번 글에서는 새로운 아키텍쳐와 특징, 이에 따른 이점을 간단하게 정리해보았다.

 

2. JSI란?

JSI는 Javascript Interface의 약자로, React Native 0.76버전부터 새롭게 도입된 아키텍쳐이다.

bridge기반 아키텍쳐의 한계를 극복해내기 위해 개발되었으며 Javascript와 Native간의 통신 방식을 개선했다.

 

3. JSI로 인한 개선점과 특징

• bridge아키텍쳐에선 React Native와 Native플랫폼이 비동기 방식으로 통신했다. 그렇기에 즉각적인 응답이 필요하거나 민감한 작업에서 지연이 발생했다. JSI는 동기 방식으로 통신하기 때문에 앞서 언급한 문제상황을 더 효율적으로 처리할 수 있게 되었다.
• JSI는 Javascript가 C++객체에 대한 참조를 직접 유지할 수 있다. 그렇기에 bridge방식에서 발생하는 JSON데이터 직렬화/역직렬화 과정이 필요없게 되어 전송 속도가 크게 향상되었다.
• JSI는 TurboModules를 지원하여 더 동적인 모듈 로딩과 사용이 가능하다. 이를 통해 필요할 때만 모듈을 로드하여 리소스를 절약할 수 있게 되었다.
• JSI는 Fabric UI Layer와 통합되어 UI 업데이트 속도가 향상되었고, 앱의 반응성과 애니메이션 성능이 크게 개선되었다.

4. 기타

React Native 0.76버전에서는 아키텍쳐의 개선뿐 아니라 react-native-community/cli의존성 제거, dev tool 업데이트, Metro업데이트로 인한 비약적인 속도 향상 등 다양한 개선점이 있다.

개인적으로 "아쿠쿠아"서비스의 React Native버전 업그레이드 이유중 하나도 이런 업데이트를 통한 생산성 증가이다.

관련글 : https://w-storage.tistory.com/75

[React Native] React Native 버전 업그레이드

2018년부터 6년동안 새 아키텍쳐를 위한 마이그레이션 작업이 이루어졌다고 하는데, React Native팀이 정말 대단하다고 느껴진다.

더 자세한 내용은 아래 페이지에서 확인할 수 있다.

https://reactnative.dev/blog/2024/10/23/release-0.76-new-architecture#react-native-new-architecture-by-default 

React Native 0.76 - New Architecture by default, React Native DevTools, and more · React Native