[React Native] React와 React Native 차이

공통점

기본적으로 JavaScript 언어 (TypeScript도 지원)

차이점

1. React는 웹에서 동작, React Native는 iOS와 AOS와 같은 모바일 환경에 맞춰 동작

React로 앱을 만드는 경우는 React로 만든 웹사이트를 Webview로 띄우는 방법으로 앱을 만든다.

React Native로 앱을 만드는 경우 React Native가 네이티브 코드가 되는 것이다.

 

2. React는 DOM을 조작하는 방식으로 UI를 업데이트하고,

React Native는 DOM을 조작하지 않고 Javascript와 네이티브 모듈을 사용하여 네이티브 UI 구성 요소를 조작한다.

React Native는 네이티브 UI 구성 요소를 사용하여 UI를 렌더링하는데, 이러한 네이티브 UI 구성요소는 React Native의 Virtual DOM에서 사용되는 것과는 다른 방식으로 동작한다.

React는 html을 Virtual DOM으로 처리하고, React Native는 네이티브의 UI를 Virtual DOM으로 관리하게 된다. 그러므로, React Native에 화면이 바뀌는 경우 Virtual DOM을 이용하기 때문에 변경된 부분만 다시 렌더링하게 되어 결과적으로 좋은 성능을 만들어 낼 수 있다.

 

3. React Native는 웹이 아니기 때문에 CSS 스타일을 사용하지 않는 대신, Flexbox나 StyleSheet를 사용한다.

또한, 웹에서 사용하는 컴포넌트도 사용하지 않아 div나 input같은 웹 컴포넌트 대신 View와 Text 같은 Native UI 컴포넌트를 사용한다.

 

4. React는 주로 React DOM과 React Router, Redux와 같은 라이브러리를 사용하지만, React Native는 React Native, Expo, React Navigation을 사용한다.

React Native의 동작을 보면 네이티브(iOS, AOS)와 React Native 사이에 Bridge가 있다.

React Native가 동작하는 런타임을 보면 iOS는 Safari에서 구동하는 JavaScript Engine인 JavaScriptCore를 사용하고, AOS는 V8을 엔진으로 사용한다.

물론 웹뷰도 해당 엔진을 사용하겠지만 동작하는 런타임이 다르다는 점이 기존 React를 이용한 웹뷰 기반 앱과 React Native 앱의 차이점이다. React Native는 Javascript Engine만 사용한다.

또한 iOS에서 사용되는 JavaScriptCore는 iOS에 쓰기 가능한 실행 가능 메모리가 없어 JIT(Just-In-Time)컴파일러를 사용하지 않는 대신 AOT(Ahead-of-Time)을 사용한다. AOT 컴파일러는 미리 컴파일된 코드를 실행하는 방식으로 작동한다. 이렇게 하면 JavaScript 코드를 실행하는데 드는 시간이 줄어들고, 앱의 성능이 향상된다.

AOS의 경우 V8을 사용하기 때문에 JIT 컴파일러를 사용합니다. 이러한 경우 iOS에서 사용하는 JavaScriptCore보다 일반적으로 빠르고 성능이 좋습니다. 또 많은 분들이 아시다시피 웹 브라우저에서 V8을 많이 사용하고 있기 때문에 성능에 있어 많은 경험이 쌓인 엔진이라고 볼 수 있다. 이렇게 엔진에 차이가 있어 같은 코드를 동작시키더라도 다른 성능을 발생시킬 수 있기 때문에 iOS와 AOS의 성능 테스트를 하거나 모니터링할 때 각각 분리하여 모니터링해야 한다.

	React	React Native
UI 렌더링	브라우저	iOS, AOS
DOM 조작	필요	필요하지 않음
CSS 스타일링	CSS, Sass 등	Flexbox, StyleShe
모바일 하드웨어 접근	불가능	가능
라이브러리	React DOM, React Router 등	React Native, Expo 등

참고

https://blog.imqa.io/react-native/