React Native 0.70 공부

Holyday33·2022년 9월 12일

몇년전부터 예고되었던 대대적인 React Native의 아키텍쳐 업데이트가 이뤄졌다고 한다.
근데 구체적으로 어떤 업데이트가 있는지 정리가 필요하다고 생각되어서 떠돌아 다니는 글, 유투브 영상, 공식문서를 두서없이 정리해 보았다.

JSI

Fabric은 RN의 새로운 렌더링 시스템이다.
- 기존 렌더링 시스템에서는 스크롤 이벤트가 생길때 보통 JSON Serialized가 브릿지로 자바스크립트와 네이티브 사이에서 전달자 역할은 한다. 하지만 교환받고 전달할 때에 같은 브릿지를 사용하기 때문에 여기서 병목현상이 발생할 수 있다. 이것이 시간도 많이 소요되고 성능이 저하되는 요인이다. 이것을 해결하기 위해 JSI가 등장했다.
- JSI로인해서 네이티브 메소드를 자바스크립트로 직접 사용할 수 있게되었다. 심지어 UI메소드도 직접 사용가능하다.
- 어떻게 그게 가능할까?
원래 기존 UI 작업은 크로스 브릿지 단계들을 거쳐 처리되었다.(React-> Native(javascript?) -> Shadow Tree=> Native UI)
- Shadow Tree는 스크린에 띄울 정보를 가지고 있고 특히 CSS를 모르는 Native UI를 위해서 위치값을 가지고 있다.

JSI는 사실 리액트 네이티브의 일부는 아니다
통합화 경량화 일반화된 모든 자바스크립트 엔진을 위한 레이어이다.
✨ JSI를 이용해서 자바스크립트가 C++ 호스트 객체들을 참조하거나 그들을 대상으로 함수를 실행할 수 있다.
이로인해 자바스크립트와 네이티브 두 영역간의 소통이 개선되었다.
JSON 메세지를 만들어 보내기 위해 serialize할 일도 없고 브릿지 섹션의 혼잡 요소도 없어진다.
JSI를 사용함으로 Fabric이 UI작업들을 자바스크립트 함수로 노출시킨다.
즉, 이번에 업데이트된 Shadow Tree가 자바스크립트 영역과 네이티브 여역에 공유되고 양쪽 모두 에서 직접적인 상호작용을 가능하게 해준다.
JSI는 C++로 이뤄져있다. IOS가 알아들으려면 C++를 Obj-C로 바인딩해야한다.

기존의 브릿지는 Fabric과 TurboModules로 나뉘었다.
- Fabric은 새 아키텍처의 UI매니저이다.
- Turbomodules는 네이티브 사이드와 상호작용하는 신세대 구현체이다.

스크린에 무엇을 띄울지 결정한다.
새로운 Shadow Tree는 자바스크립트, 네이티브 영역에 공유되며 양쪽 모두에서 직접 적인 상호작용을 가능하게 해준다.
별거 아닌것처럼 보일 수 있지만 이 새로운 Shadow Tree로 인해서 직접적인 UI작업에 대해 새 리액트의 Priority queue를 가질 수 있게 된다.
그 결과 퍼포먼스 향상을 이끈다.
예를 들어 동기적인 수행들인 리스트 네비게이션 제스쳐 핸들링 등 기존에 퍼포먼스 위험요소를 가졌지만 업데이트 이후로 개선할 수 있는 기초가 닦여졌다.
(새로운 Shadow Tree가 기존 퍼포먼스 근본적인 문제를 해결할 수 있다는 말 )

기존에 자바스크립트 코드로 사용되는 Native Modules는 앱이 시작할떄 모두 initiated되어야만 했다. 왜냐면 네이티브와 자바스크립트가 서로 어떤 상태인지 모르니까 그냥 Native Module을 다 킨것이다. 당연히 성능 낭비가 예상된다.
하지만 RN이 업데이트되고 새로운 아키텍쳐에 TurboModule이 추가되었다. 이것은 자바스크립트 코드로 필요한 Native moudle만 불러올 수 있게한다.
앱 시작 시간을 메우 단축 시켜줄 것이다.
이게 다 JSI 덕분이다.
이전에는 JSON 메시지들을 엮어서 소통했는데 이제는 그렇게 안해도된다.

리액트 네이티브 프레임워크에 있는 플랫폼 종속적인 모듈들을 제거하고 필요하면 플랫폼에서 꺼내 쓰도록하자는 취지이다.
RN는 플랫폼에 탑재되지만 어떤 플랫폼이든지 탑재될 수 있도록 개발하고 있다. 테슬라든 아이폰이든 안드로이드든 윈도우든 말이다. 그렇기 떄문에 프레임워크를 경량화하고자 하려고 한다.