[React Native] React Native란?

 리액트 네이티브에 앞서 기본 모바일 앱이란? 

기본 모바일 앱은 운영체제(Android 또는 iOS) 용으로 제작된 앱이다. iOS에서 네이티브 앱을 빌드할 때는 보통 Objective-C/Swift 개발 언어를 사용하고, Android에서는 Java/Kotlin을 사용한다.

 

규모가 큰 회사에서는 Android 개발자와 iOS 개발자 그리고 웹 개발자를 구분하여 두는 것이 큰 부담이 되지는 않을 것이다. 하지만 신생 스타트업이나 규모가 크지 않은 프로젝트를 진행하는 회사라면?

 

리액트 네이티브는 JavaScript 언어로 앱 개발을 시작할 수 있다.

 

 리액트 네이티브란? 

https://reactnative.dev

Native UI Element를 사용하여 Android 및 iOS 앱을 개발할 수 있는 크로스 플랫폼 앱 개발 프레임워크이다. JavaScriptCore Runtime 및 Bable 변환을 기반으로 한다. 이 설정으로 RN(React Native)는 새로운 JavaScript(ES6+) 기능(예: => , async/await 등)을 지원한다. 

 

React Native 프레임워크는 2013년 여름 Facebook의 내부 해커톤 프로젝트로 시작되었다. 2015년 1월 Reactjs Conference에서 첫 번째 공개 프리뷰가 출시되었고, 그 해 3월 Facebook은 React Native를 GitHub에서 공개하고 사용할 수 있게 했다.

 

 다른 크로스 플랫폼 앱 개발 프레임워크와의 비교 

자주 언급되는 크로스 플랫폼 앱 개발 프레임 워크로는 Flutter, React Native, Xamarin이 있는데, 각 프레임워크를 간단하게 소개해보자면 아래와 같다.

• Flutter : Flutter는 간단하면서도 지속적인 크로스 플랫폼 앱 개발을 가능하게 하며 최근 급상하고 있다. 주로 배우기 쉬운 반응형 객체 지향 언어인 Dart를 기반으로 하는 무료 오픈 소스 플랫폼이다.
  • 장점 : 완전한 개발 생태계, 사용자 정의 위젯 가능, Google에서 개발 및 지원하므로 안정성 제공, Hot reload, 오픈 소스 플랫폼
  • 단점 : 큰 앱 크기, 네이티브 API 노출 부족
• React Native : 2015년 Facebook에서 만든 오픈 소스 크로스 플랫폼 모바일 앱 개발 프레임워크이다. 이를 통해 사용자는 JavaScript 및 React를 네이티브 플랫폼 기능과 함께 사용하여 모바일 앱을 구축할 수 있다.
  • 장점 :사용자 인터페이스, 기성 구성 요소 제공, 기본 기능(ex. 카메라, 가속도계)에 대한 액세스, 네이티브 코드 사용 가능, Facebook에서 개발 및 지원하므로 안정성 제공, Hot reload, 오픈 소스 플랫폼
  • 단점 : 기본 탐색과 비교하여 탐색이 매끄럽지 못함, 복잡한 애니메이션 및 전환 빌드에 대한 어려움 존재
• Xamarin : 2011년에 설립된 오픈 소스 크로스 플랫폼 모바일 앱 개발 프레임워크로, 3개 중 가장 오래된 프레임워크이다.
  • 장점 : 네이티브와 유사한 성능 수준, 완전한 개발 에코 시스템, 원활한 사용자 환경
  • 단점 : 업데이트 지연, 큰 앱 크기, 무거운 그래픽, 기본 네이티브 앱 개발 언어에 대한 지식 필요

 

 React Native의 장점 

React의 장점

• [재사용성] React에서 파생되어, React의 컴포넌트 기반 개발 방식을 그대로 사용이 가능하다.
• [일관성] React에서 사용되는 개방 방식만 정하면 iOS와 안드로이드 앱을 일관성 있게 개발 할 수 있다.

JavaScript의 장점

• [개발/유지/보수 용이]iOS와 Android를 JavaScript 언어 하나로 동시에 개발할 수 있다.
• [러닝커브] JavaScript를 기반으로 하기 때문에 웹 개발자나, Node 개발자, JavaScript 개발자들이 쉽게 배울 수 있다.
• [디버깅 용이] 웹 브라우저의 자바스크립트 디버깅 기능을 이용할 수 있다.
• [Hot reload] 소스코드를 수정하면 다시 빌드하여 확인하는 네이티브 앱 개발과는 달리, 수정 후 다시 빌드하지 않고 실시간으로 수정된 부분 확인이 가능하다.

----

• [오픈소스] MIT 라이센스로 누구나 수정, 배포가 가능하며, 상업적으로 이용해도 문제가 없다. 오픈 소스 개발자 커뮤니티 활성화로 많은 네이티브 기능들이 오픈소스로 개발되어 있다.

 

 React Native의 단점 

• [러닝커브] JavaScript를 기반으로 하지만 jsx라는 리액트 고유의 방식과 리액트에 존재하는 개념(Hooks, Props, State 등)을 공부해야한다.
• [네이티브 앱 지식 필요] 오픈 소스가 존재하지 않는 네이티브 기능의 경우 iOS와 Android 네이티브 개발이 필요해지기도 한다. 따라서 어느 정도의 네이티브 앱 개발의 지식이 필요하다.
• [성능 문제] 네이티브 브릿지를 사용, JavaScript Thread와 네이티브 Thread를 연결시켜 동작하는 하이브리드 앱 방식으로 네이티브 개발 방식보다 성능이 떨어질 수 있다.
• [잦은 업데이트] 안정화가 되었지만 잦은 업데이트로 기존에 동작하던 기능이 업데이트 이후 동작하지 않는 문제가 발생하기도 한다. 또한, 오픈소스에 의존해서 개발한 네이티브 기능의 경우에는 오픈 소스의 업데이트를 기다려야하한다. 

 

참고 자료 : 

What is React Native? Is It Worth Using?

Flutter vs React Native vs Xamarin: Which is the best choice for 2019?

Flutter Vs React-Native Vs Xamarin - DZone Web Dev

리액트 네이티브란? / 리액트 네이티브 장점, 단점