React Native와 Flutter 비교
대표적인 크로스 플랫폼 개발 프레임 워크인 React Native와 Flutter를 비교해보자
React Native vs Flutter
언어
React Native는 React를 사용. React는 JavaScript기반의 React문법을 사용함
Flutter는 JS를 대신하기 위하여 구글에서 개발한 Dart라는 언어를 사용
| React Native | Flutter |
| JavaScript 기반 React 문법 | Dart |
개발 Tool
React Native와 Flutter 모두 Android Studio를 사용하여 개발이 가능
React Native는 XCode로도 사용이 가능하지만, Flutter는 구글에서 만들었기 때문에 그런지 XCode는 지원하지 않음
그외 다른 개발툴로 Flutter는 VS Code, React Native는 Expo라는 개발툴이 제공됨
| React Native | Flutter |
| Expo CLI, React Native CLI Expo CLI를 사용할 경우 React Native 라이브러리만 사용 가능하고 Native는 사용 불가능함 React Native CLI를 사용하여 Android Studio 또는 XCode로 개발이 가능 |
Android Studio, VC Code, Command Line |
지원 플랫폼
React Native는 공식적으로 Desktop을 지원하지 않지만 별도의 플러그인을 사용하여 Desktop App을 개발할 수 있으나 아직 Alpha 버전임
Flutter는 Mobile과 Web외에 Desktop 플랫폼을 공식적으로 지원함
| React Native | Flutter |
| Mobile(iOS, Android), Web | Mobile(iOS, Android), Web, Desktop(Windows, macOS, Linux), Embedded |
UI 처리방식
React Native는 JS 스크립트와 네이티브 코드사이에 메시지를 전달하는 브릿지를 사용함
그래서 iOS와 안드로이드 화면이 서로 상이하게 표시된 경우가 많음
Flutter는 Dart로 작성된 코드를 바로 네이티브로 변환하여 사용함
안드로이드 Material, iOS의 Cupertino디자인이 안드로이드, iOS 구분없이 동일하게 표현
| React Native | Flutter |
| RN Brdige를 사용하여 JS를 Native | SKIA그래픽 엔진을 사용하여 네이티브로 변환 |
성능
정확한 성능을 측정한 결과를 보면 애니메이션이 없는 비즈니스앱에서는 React Native도 사용하기에 괜찮았나 CPU와 메모리를 많이 사용하는 경우 성능이 좋지 않음
Flutter는 Native보다 약간 떨어지는 정도
| React Native | Flutter |
| CPU와 메모리 자원을 많이 사용 | Native에 근사한 성능 |
코드푸시 기능
코드푸시는 JS소스코드를 서버에서 앱으로 내려주는 기능임
간단한 화면의 오타로 인해 앱을 다시 배표해야하는 일을 예방할 수 있음
Flutter의 경우 Dart소스코드가 바로 Native로 변화되어 컴파일 되기 때문에 공식적으로 지원하고 있지 않음
| React Native | Flutter |
| 공식적으로 지원 React Native의 장점 중 하나는 바로 코드푸시의 지원임 앱을 배포하지않고 리소스를 바로 배포하여 변경사항을 적용할 수 있음 물론 네이티브 레벨의 변경은 불가능 |
공식적으로 지원하지 않음 써드파티 라이브러리(Chimera flutter CodePush)를 사용하여 구현 가능 |
참고 자료 : https://doublediary.com/2022/06/24/flutter%EC%99%80-react-native-%EB%B9%84%EA%B5%90/