리액트 네이티브 정리

Shortdary·2020년 4월 29일

* 아키텍쳐 변화

리액트 네이티브 아키텍쳐 변화 요약 그림
기존의 RN은 브릿지를 통해 비동기 json 메세지를 주고 받았다. 속도적으로나 성능적으로 더 나은 개편안으로 변화를 시도하고 있다.

정적 타입 checker (flow / typescript)를 코드에 넣는 것에 몰두 중이다.
CodeGen이라는 툴을 만드는 중이다. (자바스크립트 / 네이티브 코드 호환을 자동화)
JSI를 이용해서 자바스크립트가 C++ 호스트 객체들을 참조하거나 그들을 대상으로 함수를 실행할 수 있다.
-> 기존 JS영역과 Native언어간의 통신은 비동기 json 메세지를 보내는 것이었음.
이제는 두 영역이 서로를 잘 인지하고 json 메세지를 보내기 위해 serialize (JSON.strigify / JSON.parse) 할 일도 없다. 브릿지 섹션의 혼잡 요소를 모두 제거합니다.
Fabric, Turbo Modules

Shadow Tree : UI가 어떻게 보여지고 동작하는가 => Fabric
Native Modules: 네이티브 사이드 관리 => Turbo Modules
이 사이를 비동기 json 메세지로 관리하는 방식

Fabric은 UI가 그려지는 단계들을 줄이고 Shadow Tree를 C++로 직접 생성하여 속도를 향상시킴.
JSI를 사용하여 UI 작업들을 자바스크립트 함수로써 노출시킨다. 따라서 Shadow Tree가 js 영역과 native 영역 모두에 공유되고 양쪽 모두 직접적 상호작용이 가능하다.
이는 UI를 자바스크립트가 직접 컨트롤을 가능하게 하여 UI 작업들도 동기적 수행들에 참여할 수 있게 되 었다.

기존의 방식은 모든 모듈들은 앱이 시작될 때 initialized 되어야 했다.
Turbo Modules는 js를 통해 모듈이 필요할 때만 불러오고 직통 reference를 유지한다.
이는 불필요한 json 메세지 소통을 없애고, 앱의 시작시간을 단축시킨다.

* 스타일링

const buttons = StyleSheet.create({
  disabled: {
    backgroundColor: colors.disabledCTAButton,
  },
  otpAuthRequest: {
    borderRadius: 4,
    backgroundColor: colors.apronGreen,
    justifyContent: 'center',
    textAlign: 'center',
    width: 70,
    height: 44,
  },
});