새로운 아키텍쳐

  1. Fabric (Renderer) - UI를 위한 새로운 아키텍쳐, React 18 에서 지원하는 새로운 기능들을 RN에서도 사용 가능.
  2. TurboModules (NativeModules) - 네이티브 모듈을 위한 새로운 아키텍쳐. (proposal)
    새로운 아키텍쳐들은 더이상 Bridge 를 이용해서 통신을 하지 않고, JSI 를 사용하여 Native 코드를 동기적으로 호출하게 된다.
    참고: https://github.com/react-native-community/discussions-and-proposals/issues/91

JSI(Javascript Interface)

기존에는 JS에서 Native 코드를 호출하기 위해 규격에 맞게 데이터를 Serialize 하고 통신을 위한 Queue 에 담고 이를 Native 에서 꺼내서 Deserialize 하여 처리하는 식으로 비동기적으로 이루어 졌었다. 참고 코드

브릿지를 사용하지 않고, JSI 를 사용하게 되면 Native 객체들을 JS 런타임에 노출 및 바인딩을 시킬 수 있게 되고, JS 에서 Native 코드를 호출하는 전체적인 구조가 동기적으로 바뀌게 된다.
이렇게 되면 더이상 직렬화/역직렬화 및 통신이 필요없게 되면서 자연스레 성능이나 응답성이 향상이 될것으로 예상된다.

JSI는 C++ 로 작성되었고 Javascript 런타임을 받아서 글로벌 영역에 Native 영역에 존재하는 호스트 객체를 다루는것으로 보인다.
JS VM (jsc,hermes) -> JSI(c++) -> [Binder for JSI (jni) ->] Native (java/objc)

이러한 JS에 호스트 객체를 바인딩하는 접근법은, 간단하게 브라우저 콘솔창을 열어서도 찾아볼 수 있다.


근데 이제 네이티브 코드로 작성된 코드들을, JS에 바인딩을 누가 언제 시켜주느냐가 문제가 되는데...
이미 JSI 를 사용하고 있는 네이티브 모듈들의 코드를 살펴보면, 네이티브 코드가 호출될 때 JSI(c++)를 사용해서 직접 Javascript 에 바인딩을 해주고 있는 것 같다.

네이티브 모듈의 인터페이스를 typescript/flow 로 자바스크립트 쪽에 작성을 해놓고 이를 사용해서 native 스키마를 추출해주는 react-native-codegen 라는 도구가 있기는 한데, 이게 아직 양쪽 플랫폼에 대한 제대로된 예제가 없어서 정확한 사용 방법에 대해 확인을 못했다.

대충 살펴본 바로는 자바스크립트 인터페이스(ts,flow) 를 통해서 새로운 아키텍쳐에 필요한 코드들을 추출하는 도구이고, 인터페이스에 맞는 네이티브 모듈을 위한 추상 클래스(java,objc) 그리고 이를 JS에 바인딩하기 위해 필요한 JSI(c++,jni) 관련 코드들의 추출을 도와주는 것 같다.

모듈을 만드는 개발자들은 자바스크립트 인터페이스를 작성한 뒤 code-gen 을 사용해서 네이티브 모듈의 추상 클래스 코드를 뽑아 상속한 뒤에 인터페이스에 맞춰 모듈을 작성하면 되고, 모듈을 사용하는 개발자들은 건드릴 것 없이 code-gen에 의해 빌드타임에 JSI 관련 코드들이 자동으로 추출된다.
이 도구가 완벽하게 지원된다면, 기존의 네이티브 모듈들도 typescript/flow 를 사용해서 인터페이스만 작성해놓고 몇가지 설정만 한다면 쉽게 새로운 아키텍쳐 지원이 가능해보인다.


위 글은 아래의 링크들을 참고해서 작성했습니다. 더 자세한 내용은 아래의 링크들을 참고하세용
1. https://blog.nparashuram.com/2019/01/react-natives-new-architecture-glossary.html
2. https://youtu.be/7gm0owyO8HU?t=232
3. https://hero35.com/react-live/2019/react-native-codegen
4. https://github.com/facebook/react-native/tree/main/packages/react-native-codegen
5. https://formidable.com/blog/2019/react-codegen-part-1/
6. https://github.com/cipolleschi/RNNewArchitectureLibraries
7. https://github.com/react-native-community/RNNewArchitectureApp
8. https://github.com/facebook/react-native/tree/main/packages/react-native-codegen
9. https://github.com/microsoft/react-native-tscodegen
10.https://www.youtube.com/watch?v=UcqRXTriUVI
11.https://github.com/reactwg/react-native-new-architecture

profile
JavaScript, TypeScript and React-Native

0개의 댓글