발단
나는 현재 react까지 공부해 본 입장고, 하이브리드 앱을 만들기 위해 처음에는 react native를 쓸 마음이었다.
하지만 구글 트렌드 전 세계 대부분 flutter이 더 높게 나왔다.
그래서 비교를 해보기로 했다.
React Native vs Flutter
React Native, Flutter 둘다 cross platform이다.
쉽게 ui를 개발할 수 있다.
hot-reload 지원
React Native
- facebook에서 만든 프레임워크
- javascript언어 기반
- Febric '렌더링 시스템'(렌더링 엔진이 아니다.) 도입
- Hermes javascript 최적화 엔진 도입
- 쉬운 개발환경
React Native history
기존에는 bridge방식(Native - json - bridge - json - React Native )으로 작동해 실행속도가 현저히 느렸다.
하지만 오랜 연구 끝에
Hermes를 통해서 React Native(javascript)파일을 저수준의 언어로 바꾸는 최적화 도구와
Febric을 통해 과정이 환경(ios, android etc)별로 각각 존재했던 것이 c++하나로 통합되었다.
최종적으로 속도, 파일크기, 메모리 점유율을 줄였다.
https://engineering.fb.com/2019/07/12/android/hermes/
물론 이벤트와 복잡한 뷰에서는 여전히 react에서 c++로 전환이 필요하다. (아래 그림 참고)
https://reactnative.dev/architecture/xplat-implementation
간단하게 요약하자면, 기존에는 렌더링 속도가 느렸다.
하지만 Hermes(javascript 최적화 엔진)과 Febric(rendering system)을 통해서 속도를 발전하고 있다.
Flutter
- google에서 만든 프레임워크
- dart언어 기반
- skia엔진을 기반으로 렌더링
- 친절한 문서
Flutter history
flutter는 dart라는 언어로 개발해야 한다.
그러므로써 skia자체 렌더링엔진을 사용할 수 있게 된다.
렌더링엔진을 사용한다는 것은 ios, android, web etc어디든 상관없이 동일한 디자인을 보여줄 수 있다는 의미이다.
https://docs.flutter.dev/resources/architectural-overview
widget및 플러그인이 추가되는 방식으로 발전하고있다.
내 결론
React Native는 기기 고유의 렌더링을 사용하면서 react 생태계를 모든 기기에 적용하려는 방향이다.
Flutter는 유니티나 언리얼엔진같은 엔진이다.
게임엔진과 차이점이라면, 버튼이나 아이콘 같은 컴포넌트 스타일과 슬라이드같은 웹 스타일에 초점을 맞추었고, dart라는 구글 자체 언어 기반이며, 오픈소스 프레임워크라는 점이 다를 뿐.
동일한 디자인이 필요하거나, UI 호출이 많을 때, 복잡한 애니메이션을 구현할 때 flutter를 사용하는 것이 좋겠다.(skia rendering engine)
3d, 물리연산같은 경우는 게임엔진
React Native는 javascript이기에 사용하는 한 라이브러리들을 바로 쓸 수 있다.
react를 공부했던 사람이라면 react native도 금방 배울 것이다.
기기에 따른 기본 디자인 및 화면차이를 고려해야겠지만
마지막으로 진짜 개인적인 견해지만,
Flutter을 통한 독자적인 (모바일급 영향력을 가진)기기가 등장하지 않는다면
React Native와 Flutter의 대치 구도는 계속될 것 같다.
React Native : react --> react native
Flutter : mobile native app --> flutter
그래서 일단은 react native, flutter 둘 다 배워보자!
