REACT NATIVE 스터디. 1주차 1단원. React Native란? DRACONIST

1. 리액트 네이티브의 시작

2015년 페이스북에서 공개한 오픈소스 프로젝트로,

React 기반으로 iOS와 안드로이드에서 동작하는 네이티브 모바일 애플리케이션의 자바스크립트 프레임워크 입니다.

이외에도 Windows, macOS등을 공식 지원하고 있고 웹이나 타이젠 등 비공식적으로 지원하는 플랫폼까지 합치면 거의 모든(windows phone, 리눅스 제외) 플랫폼을 지원합니다.

 

따라서 크로스 플랫폼이 가능하다는 장점을 가지 고 있고, App Store 심사 없이 UI와 function을 업데이트 할 수 있는 Code Push기능을 지원하는 유일한 라이브러리입니다.

 

2. 리액트 네이티브의 장점과 단점

<장점>

1) 리액트에 익숙한 개발자라면 아주 빠르게 배울 수 있다.

이전에는 앱 애플리케이션을 만들기 위해 Objective-c 또는 자바등을 사용해야 했지만 이제 웹 개발자가 앱 개발로 넘어가는 게 아주 쉬워졌습니다.

 

2) 코드 대부분이 플랫폼간 공유가 가능하다.

iOS,안드로이드, 두 플랫폼에서 동시에 개발할 수 있다는 장점이 있습니다. 두 플랫폼을 동시에 개발 가능하므로 개발 비용과 시간이 절약됩니다.

 

3) 모바일 개발 지식이 적어도 시작할 수 있다.

react(웹)에 대한 지식을 가지고 있는 개발자는 React Native에 대해 빠르게 배우고 사용할 수 있습니다.

 

4) fast refresh 기능으로 변경된 코드만 컴파일하여 수정내용을 빠르게 확인할 수 있다.

이전에 사용하던 Hot Reload에서 React Native 0.61 이상에서 도입된 방식으로 코드 수정 후 변경된 코드 부분만 재로딩하여 보여줍니다.

 

5) 크로스 플랫폼이 가능하다.

개발자가 TypeScript나 React문법을 사용하여 앱을 작성하면 React Native 컴포넌트는 각 플랫폼에서 해당 플랫폼의 네이티브 UI 컴포넌트로 변환됩니다. 예를 들어 <Text>는 iOS에서는 UILabel, Android에서는 TextView로 변환됩니다. <Button>은 iOS에서는 UIButton, Android에서는 Button으로 변환됩니다.

최종적으로 사용자는 React Native로 개발했더라도 실제로는 플랫폼 고유의 네이티브 컴포넌트를 사용하기 때문에 네이티브 앱과 동일한 성능과 사용자 경험을 얻을 수 있습니다.

 

Cordova코도바 나 AngularJS 프래임워크를 기반으로 개발된 Ionic도 웹 기술(HTML, CSS, JavaScript)를 사용한 크로스 플랫폼이지만 웹 뷰(web view)를 사용하여 렌더링하는 방식이기 때문에 react Native보다 성능이 떨어집니다.

 

#웹 뷰 방식 : Cordova와 Ionic은 HTML, CSS, JavaScript로 작성된 UI를 **웹 브라우저의 렌더링 엔진(Web View)**에서 실행합니다. 결과적으로 앱은 네이티브 앱처럼 보이지만, 실제로는 웹 페이지가 네이티브 컨테이너 안에서 동작하는 구조입니다.

 

Flutter React Native와 함께 크로스 플랫폼 지분의 대부분을 차지 하고 있는 오픈소스 UI 프레임워크입니다. React Native와 유사하게 크로스 플랫폼 개발을 목표로 하지만, Flutter는 자체적인 철학과 기술 스택을 사용합니다.

 

<단점>

1) 새로운 기능의 업데이트가 느리다.

리액트 네이티브는 코드가 플렛폼 고유의 네이티브 코드로 바뀌는 방식이기 때문에 안드로이드나 iOS에서 업데이트를 통해 새로운 API를 제공한다면 해당 API의 기능을 제공하기위해 리액트 네이티브가 업데이트 되어야 합니다. 그렇기 때문에 새로운 기능이 플랫폼에 업데이트되었을 때 적용하는 시간이 걸립니다.

 

2) 유지보수가 어렵다.

자동으로 자주 업데이트를 해주어 버그를 수정하고 기능을 추가해준다는 장점은 있지만 이것은 개발과정에서 문제가 생겼을 때 문제의 원인을 찾고 해결하는 것을 어렵게 합니다.

 

3) 리액트 네이티브 자체 버전이 자주 업데이트 된다. 

React Native는 Facebook이 주도적으로 관리하며, 커뮤니티와 함께 발전하는 오픈소스 프로젝트입니다. 따라서 일반적으로 매달 한번씩 새로운 릴리즈 버전이 나옵니다.

이에 대해서는 이야기할 것이 있는  것이 최신 릴리즈버전이 2019년 버전이라서 잘모르겠습니다.

React Native Archive · A framework for building native apps using React

 

3. 리액트 네이티브의 동작 방식

리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층(iOS, 안드로이드)과 통신할 수 있도록 연결하는 브릿지(bridge)가 있습니다.

 

React Native는 맨 처음 실행될 때 네이티브로 변환된 코드로 완전히 대체되어 동작하는 방식은 아닙니다. 정확히 말하면, React Native는 실행 시에도 계속해서 JavaScript와 네이티브 코드가 협력하며 동작합니다.

사진 출처: https://brocoders.com/blog/react-native-interview-questions/

 

네이티브 코드(Kotlin/Java, Objective-C)의 경우 기기에서 직접 실행되지만 JS의 경우 기기에서 직접 실행하지 못하기 때문에 가상 머신을 필요로하게 됩니다. 이것을 JavaScriptCore라는 JS 엔진이나 Hermes라는 엔진이 맡게 됩니다.

이렇게 만들어진 js thread와 Native thread가 통신하기 위해 JSON으로 변환, 역변환하는 역할을 JsToNativeBridge, NativeToJsBridge와 같은 브릿지가 합니다.

 

즉, JavaScript 스레드는 JavaScript 엔진(가상 머신) 위에서 동작하며, 네이티브 코드(메인 스레드, 셰도우 스레드, 네이티브 모듈 등)와 통신합니다. 이 통신은 React Native의 브릿지를 통해 이루어지며, 데이터를 주고받을 때 JSON 형식이 사용됩니다.

# 웹 뷰 방식은 네이티브 안에 또 브라우저를 만든 것으로 좀 더 성능이 떨어집니다.

 

브릿지에 대해 더 궁금하다면 아래의 참고 블로그로)

React-Native 브릿지

 

네이티브 영역의 main thread는 UI를 담당하고 shadow thread는 레이아웃을 계산하는 백그라운드 스레드입니다. 네이티브 모듈도 있는데 이것을 자체 스레드가 있습니다. 단 안드로이드의 경우 thread pool을 공유합니다.

 

리액트 네이티브는 이렇게 기기와 통신하는 모든 자바스크립트 기능을 분리된 스레드로 처리하여 성능을 높일 수 있었습니다.

 

4. React에서 제공하던 기능

가상 DOM(Virtual DOM)

리액트는 데이터가 변할 경우 자동으로 화면을 다시 그리는 virtual DOM을 제공합니다. react를 이미 해보셨다면 jsx를 여러개 만들어서 일부 레이아웃만 불러오는 방식을 본 적이 있을 것입니다. React Native에서도 이를 제공합니다.

 

JSX

JSX(Javascript XML) 는 바벨을 사용하여 자바스크립트로 변환됩니다.