개요
크로스플랫폼으로 어떤 OS에서도 동작하기 위한 앱을 개발하기 위하여 여러가지 고민을 해보았다. 그래서 대표적으로 사용하고 있는 React Native와 Flutter에 대해 알아보기도 하였다. 크로스플랫폼 개발프레임워크를 비교하여 자신이 개발하고 있는 앱의 특성과 환경에 적합한 프레임워크를 찾아야한다. 그래서 대표적으로 사용되고 있는 Flutter 와 React Native를 비교해보도록 하겠다.
Flutter vs React Native
제작사
Flutter는 구글이 React Native는 메타(페이스북)에서 개발하였다.
- Flutter : 구글(Google)
– 구글에서 2017년 5월에 출시하였다. 하나의 코드 베이스로 안드로이드, iOS, 리눅스, 윈도우즈, 맥OS, 웹브라우저에서 모두 동작 되는 앱을 개발하기 위해 출시하였다. - React Native : 메타(Facebook)
– 2012년 페이스북이 HTML5외에 새로운 모바일 사용자 경험을 개발하기 위하여 제작하기 시작하여 2015년에 발표하였다.
사용언어
Flutter는 JS를 대신하기 위하여 구글에서 개발한 Dart라는 언어를 사용하고 React Native는 React의 것을 그대로 사용한다. React는 JavaScript기반의 React문법을 사용한다.
- Flutter : Dart
- React Native : JavaScript 기반 React 문법
개발툴
Flutter와 React Native 모두 Android Studio를 사용하여 개발이 가능하다. React Native는 XCode로도 사용이 가능하지만, Flutter는 구글에서 만들었기 때문에 그런지 XCode는 지원하지 않는다. 그외 다른 개발툴로 Flutter는 VS Code, React Native는 Expo라는 개발툴이 제공된다.
- Flutter : Android Studio, VC Code, Command Line
- React Native : Expo CLI, React Native CLI
Expo CLI를 사용할 경우 React Native 라이브러리만 사용 가능하고 Native는 사용 불가능하다. React Native CLI를 사용하여 Android Studio 또는 XCode로 개발이 가능하다.
지원 플랫폼
Flutter는 Mobile과 Web외에 Desktop 플랫폼을 공식적으로 지원한다. React Native는 공식적으로 Desktop을 지원하지 않지만 별도의 플러그인을 사용하여 Desktop App을 개발할 수 있으나 아직 Alpha 버전이다
- Flutter : Mobile(iOS, Android), Web, Desktop(Windows, macOS, Linux), Embedded
- React Native : Mobile(iOS, Android), Web
UI처리방식
UI를 처리할때 Flutter는 Dart로 작성된 코드를 바로 네이티브로 변환하여 사용된다. 안드로이드 Material, iOS의 Cupertino디자인이 안드로이드, iOS 구분없이 동일하게 표현이 된다. 반면에 React Native는 JS 스크립트와 네이티브 코드사이에 메시지를 전달하는 브릿지를 사용한다. 그래서 iOS와 안드로이드 화면이 서로 상이하게 표시된 경우가 많다.
- Flutter : SKIA그래픽 엔진을 사용하여 네이티브로 변환
- React Native : RN Brdige를 사용하여 JS를 Native
성능
정확한 성능을 측정한 결과를 보면 애니메이션이 없는 비즈니스앱에서는 React Native도 사용하기에 괜찮았으나 React Native는 CPU와 메모리를 모두 많이 사용하여 성능이 가장 좋지 못했다. Flutter는 Native보다 약간 떨어지는 정도이다.
- Flutter : Native에 근사한 성능
- React Native : CPU와 메모리 자원을 많이 사용
코드푸시 기능
코드푸시는 JS소스코드를 서버에서 앱으로 내려주는 기능이다. 간단한 화면의 오타로 인해 앱을 다시 배표해야하는 일을 예방할 수 있다. Flutter의 경우 Dart소스코드가 바로 Native로 변화되어 컴파일 되기 때문에 공식적으로 지원하고 있지 않다.
- Flutter : 공식적으로 지워하지 않음
– 써드파티 라이브러리(Chimera flutter CodePush)를 사용하여 구현 가능하다. - React Native : 공식적으로 지원
– 리액트 네이티브의 장점 중 하나는 바로 코드푸시의 지원이다. 앱을 배포하지않고 리소스를 바로 배포하여 변경사항을 적용할 수 있다. 물론 네이티브 레베의 변경은 불가능하다.