React Native VS. Flutter

 

 

리액트 네이티브와 플러터는 크로스 플랫폼 라이브러리로

하나의 코드로 iOS, 안드로이드 앱을 만들 수 있다(웹이나 데스크탑 앱 등 다른 플랫폼도 가능)

 

새로운 프로젝트가 웹, iOS, 안드로이드 세 플랫폼에서 운영되어야 해서

하나의 코드로 모든 플랫폼을 운영할 수 있는 방안을 고민하고 있다

아이오닉은 사용해봤는데 큰 장점을 느끼지는 못 했다

아이오닉 모듈을 사용하면서 커스텀 때문에 곤란했던 기억은 많이 남았다

 

하이브리드 앱을 만들 때 리액트 네이티브와 플러터를 많이 사용한다는 것만 알고 있었기 때문에

둘의 특징 및 장단점을 찾아봤다.

 

	React Native	Flutter
개발사	메타	구글
출시연월	2015년 3월	2018년 12월
언어	Javascript	Dart
깃허브 스타	113K	158K
사용된 서비스	페이스북, 인스타그램, 핀터레스트, 마이크로소프트 오피스, 우버 잇츠, 테슬라, 디스코드, 스카이프, 토스, 카카오페이...	구글 애즈, BMW, Hamilton, 이베이 모터스, 뉴욕타임스, 누뱅크...

 

리액트 네이티브가 거의 4년은 일찍 출시되었지만 스타수는 플러터가 이미 따라잡은 것을 볼 수 있다

많은 개발자들이 선택한 데는 이유가 있지 않을까?

 

그런데 일찍 출시되었기 때문인지 더 나은 점이 있어서인지

유명한 서비스들 중에 리액트 네이티브를 사용하는 것이 많다

플러터를 사용한 서비스는 크게 와닿는 게 없는...

 

리액트 네이티브

리액트 네이티브가 플러터보다 오래되었기 때문에

아무래도 쌓인 자료가 더 많다

그리고 메타에서 버그를 잡을 시간도 더 길었으니까 좀 더 안정적이지 않을까..하는 믿음?

자바스크립트를 사용하기 때문에 자바스크립트 라이브러리 역시 사용 가능하다

 

JIT(Just In Time) 방식이라서 아무래도 느리다

 

모듈 의존성과 관련한 이슈가 있어서 유지보수가 힘들다

 

모바일 장치 성능 제어력이 더 좋아서 모바일 기기의 성능을 사용할 일이 많은 서비스라면

플러터보다는 리액트 네이티브를 사용하는 게 좋다(물론 네이티브 앱을 사용하는 게 더 좋다)

 

코드푸시 기능이 있다: 앱 개발에서 가장 신경쓰이는 배포 전 심사 과정을 거치지 않고 앱을 업데이트할 수 있다

 

코드 재사용이 쉽다

 

네이티브 컴포넌트를 사용하는 게 기본이기 때문에 플랫폼마다 UI가 달라보일 수 있다

 

플러터

성능과 속도면에서 플러터가 좋다는 말을 많이 들었는데

스마트폰 자체 성능이 고도화된 면도 있고 리액트 네이티브도 계속 개선되어서

큰 차이가 느껴질 정도는 아니라고 한다(특히 리액트 네이티브의 헤러메스 엔진 적용 이후. v0.7)

 

AOT(Ahead of Time): 다트가 기계어로 컴파일되어 리액트 네이티브처럼 자바스크립트 브릿지가 필요없다

 

개발 편의성이 좋아 빠른 개발이 가능하다

사전에 설계된 위젯을 제공해준다: 플랫폼 특화 UI를 사용하지 않아서 플랫폼이 달라도 통일된 UI 제공 가능

구글 매터리얼 디자인을 사용할 수 있다

 

다트를 배워야 하는 어려움이 있다

 

여전히 성장 중이기 때문에 deprecated되는 위젯들, 계속 바뀌는 가이드문서 등의 문제가 있다고 한다

 

애니메이션 생성이 쉽다: Hero, Slivers

 

플러터 웹은 느리다

 

 

플러터가 부적절한 경우

 

- 3D 터치 기능이 필요한 경우(아직 제공하지 않음)

 

- 플랫폼 별로 다른 디자인이 필요한 경우

 

- OS를 많이 사용하거나 네이티브 라이브러리를 많이 사용하는 경우

 

- UI보다는 모바일 기기(하드웨어) 자체 기능에 집중하는 경우: 음악 플레이어나 카메라 앱처럼

 

- 작은 사이즈의 서비스가 필요한 경우: 플러터는 기본 앱 사이즈가 크다

 

리액트 네이티브가 부적절한 경우

 

- 백그라운드 태스크에 특화된 서비스가 필요한 경우

 

- 블루투스 통신이 필요한 경우

 

- 안드로이드 앱만 필요한 경우

   : 리액트 네이티브에 iOS 앱 지원이 더 잘 되어 있기도 하고 굳이 안드로이드만 필요하면 리액트 네이티브를 선택할 필요는 없다

 

 

+ ) 웹 플랫폼으로 빌드를 할 경우..

 

- 둘 다 웹에서 성능이 좋지는 않지만 하나의 코드로 웹과 iOS앱, 안드로이드 앱을 만들 수 있다는 데 의의가 있지 않을까

 

- SEO에도 어려움이 있다

 

- 리액트 네이티브는 Expo라는 프레임워크를 사용하는 게 좋다

 

 

참조

https://blog.toktokhan.dev/react-native-vs-flutter-%EC%96%B4%EB%96%A4-%EA%B8%B0%EC%88%A0%EC%9D%84-%EC%84%A0%ED%83%9D%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C-eef4d8c3c3c3

React-native vs Flutter 어떤 기술을 선택해야 할까?

https://lucky516.tistory.com/276

플러터 vs 리액트 네이티브 승자는 리액트인 이유

https://medium.com/fm-stories/react-native-%EC%99%80-flutter%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8B%A4%EB%A5%BC%EA%B9%8C-e9ea4a81b6d5

React Native 와 Flutter는 어떻게 다를까

https://www.thedroidsonroids.com/blog/flutter-vs-react-native-comparison

Flutter vs React Native – Which is Better for Your Project?