거의 알고리즘 일기장

RCTView, RCTText를 직접적으로 사용하면 더 빠르다? 본문

react-native

RCTView, RCTText를 직접적으로 사용하면 더 빠르다?

건우권 2024. 5. 19. 18:45

오늘 점심에 재미있는 실험에 대한 아티클을 읽었는데, 공유차원에서 올린다. 자세한 내용은 직접 보는것이 좋다.
https://blog.theodo.com/2023/10/native-views-rn-performance/

 

Using RCTView & RCTText in React Native for Performance Gains | Theodo

Comparing the performance of rendering View and Text elements on React Native, using regular and native views. Assessing the impact of the new architecture on iOS and Android, with insights into rendering times and deviations. Learn how using NativeViews a

blog.theodo.com


이 아티클에 따르면 RCTView, RCTText를 직접 사용했을때 기존에 사용하는 react native의 View, Text 컴포넌트를 사용할때보다 꽤나 차이가 있다고 한다. (물론 극단적인 경우임, 오히려 생각보다 bridge와 fabric의 랜더 퍼포먼스 차이가 없어서 의아하긴 했음.)

 

그래서 한번 RCTView와 우리가 사용하는 View에 얼마만큼의 뎁스가 있길래 차이가 날까? 생각하며 한번 코드를 보았다.

 

 

https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/View/View.js

 

react-native/packages/react-native/Libraries/Components/View/View.js at main · facebook/react-native

A framework for building native applications using React - facebook/react-native

github.com

확인해봤을때 View와 Natvie View Component와의 차이는 1 depth다. 그리고 코드를 봤을때 뭔가의 추가적인 처리가 많은거 같진 않다.

Text는 저위의 아티클에서도 쓰여있듯이 아래 내용외에는 View와 비슷함. ㅋㅋ

In the Text element, an onPress prop is added, which isn’t commonly used (since you’d use a Pressable or TouchableOpacity).

 

 https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Text/Text.js

 

react-native/packages/react-native/Libraries/Text/Text.js at main · facebook/react-native

A framework for building native applications using React - facebook/react-native

github.com

 

 


해당 내용은 아 이런게 있구나~ 정도로 재미로만 보면 좋을것 같다. 

 

그리고 초반에 react native render 테스트에 대한 정확한 방법을 언급하는데, 이게 꽤나 맛도리 글이므로 한번 읽어봐도 좋아보인다.
https://github.com/react-native-community/RNNewArchitectureApp/tree/new-architecture-benchmarks

 

GitHub - react-native-community/RNNewArchitectureApp: A collection of sample React Native Apps that will show you how to use the

A collection of sample React Native Apps that will show you how to use the New Architecture (Fabric & TurboModules) step-by-step. - react-native-community/RNNewArchitectureApp

github.com

 

반응형
Comments