Flutter

[IT] 플러터 vs 리액트 네이티브 비교

밍글링글링 2023. 1. 5.
728x90

 

플러터 vs 리액트 네이티브

 

코드푸쉬
스토어 업데이트 없이 10초안에 버그 수정 및 소스 수정

 

  플러터 리액트 네이티브
CodePush (OTA) X O

 

코드푸쉬는 리액트 네이티브의 큰 장점이다. 

토스글로벌앱도 리액트 네이티브 코드푸쉬의 도움을 많이 받았다는 이야기도 있다.

 

언어
dart vs (JavaScript, TypeScript)

 

초기 프레임워크로 신생언어를 사용하여 러닝커브가 길다.

dart는 플러터에서만 거의 사용한다고 생각해도 무방하다.

 

Dart 장점

  • 오픈 소스이다.
  • 구글의 지원을 받고 Google Cloud Plaform에서 실행이 편리하다.
  • JavaScript보다 2배 빠르다.
  • 형식이 안전하여 AOT 및 JIT 컴파일러로 컴파일된다.
  • 프로젝트 전반에 걸쳐 확장이 가능하다.
  • JavaScript 문법과 비슷해서 쉽게 배울 수 있다.

Dart 단점

  • 개발자에게 생소하며 시장에서 점유율이 많이 낮다.
  • 온라인 리소스가 제한적이고 문제 해결책을 찾기 힘들다.
  • 단일 객체 패러다임(클래스)를 가진다.
  • 다른 대입문을 작성하지 않고는 함수의 이름은 변경할 수 없다.

JavaScript 장점

  • 웹 및 모바일 앱 모두에서 사용할 수 있습니다.
  • 프론트엔드와 백엔드 모두에 사용할 수 있으므로 모든 장치에서 JavaScript를 실행할 수 있다.
  • 커뮤니티가 크고, 좋은 프레임워크들이 많다.
  • 다른 언어와 친숙하고 많은 다른 앱에서 사용 가능하다.
  • 빠르고 유연하고 가볍다.

JavaScript 단점

  • 동적 언어이기에 프로그래머는 실수를 쉽게할 수 있지만... 대안으로 TypeScript가 있다.
  • 지속적인 변화가 있다.
  • 클라이언트 보안은 많은 것을 요한다.
  • 다중 스레딩 지원을 사용할 수 없다.

 

하위호환성
null safety vs class component [구글(플러터) vs 메타(리액트 네이티브)]

 

플러터의 2.0으로 버전이 올라가면서 null safety 기능 추가하고 1.0과의 호환성에는 초점을 맞추지 않았다.

리액트 네이티브 class component에서 function component로 넘어왔지만, class component를 지원한다.

 

구글은 angular도 버전이 올라가면서 기존의 angular도 버렸다.

오픈소스를 대하는 두 기업의 태도가 다르다.

 

안정성
Github 의 이슈 갯수로 안정성을 판단하였다.

플러터 5천개, 리액트 네이티브 2천개

 

플러터는 관심을 제일 많이 가지고 있는 대다수의 이슈들은 미기능 지원에 대한 내용이고,

리액트 네이티브는 버전 업글레이드, 성능에 대한 문제에 대한 내용을 이야기하고 있었다.

 

기본 성능
기존에는 플러터가 성능이 좋았지만, 현재는 리액트 네이티브 hermes 엔진 도입, 새로운 아키텍처 등으로 인해 비슷하다.

 

애니메이션 성능
리액트 네이티브 60fps 고정, 플러터는 느림.

 

그래픽 엔진을 사용하니, 애니메이션과 UI를 동시에 그리면서 애니메이션이 느릴 수 밖에 없다.

 

빌드 사이즈
리액트 네이티브보다 플러터의 빌드사이즈가 더 크다.

 

트렌드
구글 트렌드 Github 스타수로만 판단하였을때는 플러터가 더 우세하다.

 

개발 편의성
expo go, EAS build, EAS submit, EAS metadata

expo go 로 실시간으로 개발된 내용들을 보여줄 수 있다.

 

해당 프레임워크 사용기업
플러터
  • Tencent
  • BMW
  • 뉴욕타임즈
  • ByteDance
  • TOYOTA

 

리액트 네이티브
  • 트위터
  • TESLA
  • 인스타그램
  • WIX
  • shopify
  • facebook

 

필자는 둘다 사용하지 않는다.

Capacitor.js를 사용해서 자바스크립트, 타입스크립트앱을 앱 환경에서 구동한다.

참고 URL: https://javamin.tistory.com/entry/svelte-sveltekit%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0

728x90

'Flutter' 카테고리의 다른 글

[Flutter] Flutter 개발 환경 세팅  (0) 2022.03.15

댓글