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

2023. 1. 5. 10:57·Flutter
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
'Flutter' 카테고리의 다른 글
  • [Flutter] Flutter 개발 환경 세팅
밍글링글링
밍글링글링
mingling - 밍글링, 밍글밍글링. 코드와 어우러지다. IT/ 프로그래밍/소스
    반응형
    250x250
  • 밍글링글링
    mingling
    밍글링글링
  • 전체
    오늘
    어제
    • 밍글링글링 (407) N
      • Flutter (2)
      • 일상생활 (8)
        • 리뷰 (1)
        • 생활정보 (4)
        • 맛집 (0)
        • 여행 (0)
        • 모든정보 (3)
      • JAVA (126)
        • 개념 (6)
        • 예제 (115)
        • Exception (2)
      • C (1)
        • C (1)
        • C++ (0)
        • C# (0)
      • JS (29)
        • JavaScript (18)
        • JQuery (5)
        • AJax (0)
        • NODE.JS (6)
        • Angular.JS 2.0 (0)
      • WEB (87)
        • HTML (6)
        • CSS (61)
        • JSP (20)
        • JSTL (0)
      • FrameWork (8)
        • Spring (8)
        • BootStrap (0)
        • MyBATIS (0)
        • JUnit (0)
      • 외부 라이브러리 (5)
      • 공유 소스 관리 (5)
        • Git (5)
        • SVN (0)
      • 빅데이터 프로그래밍 (37)
        • Python (37)
        • R Programming (0)
      • DB (7)
        • ORACLE (0)
        • MySql (6)
      • Development Tools (7)
        • StarUML (0)
        • eXERD (0)
        • Eclipse (4)
      • SKILL (6)
        • Migration (0)
        • Security (6)
      • MicroSoft (0)
        • Excel (0)
        • Word (0)
      • Android (0)
      • Server (21)
        • Ubuntu (5)
        • Linux (15)
      • IOS (0)
      • XML (0)
      • 미디어 (0)
      • 공지사항 (3)
      • NETWORK (1)
      • 게임 (4)
        • 피파 (1)
        • 리니지M (0)
        • 배틀그라운드 (1)
        • 듀랑고 (2)
      • 세상 이슈 (6)
      • 일렉트론 (0)
      • 대회 소식 (4)
      • 업무 (2)
      • Express, Vue (6)
      • docker (11)
      • svelte (3)
      • 블록체인 (1)
      • IT (10) N
      • Rust (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    css transition
    vue cli
    svelte
    css perspective
    오류
    클론코딩
    VS Code 팁
    프런트엔드
    자바 객체 지향
    React Compiler
    ssl 인증서 발급
    css block
    nginx ssl 설정
    에디터 팁
    자바 생성자
    API 설계
    servlet class
    css list
    자바 exception
    티스토리 자동화
    mysql db
    브라우저 자동화
    gitlab 설치
    Extension Bisect
    SSL 인증서
    러스트
    Node
    리눅스 설치
    Rust lang
    자바 클래스
    css table
    자바 배열
    java casting
    vscode
    자바 for문
    vue 설치
    lang rust
    jsp parameter
    AI 코딩 에이전트
    spring java
    rust linux
    ubuntu
    css tb
    docker
    jsp include
    proxy pass
    nginx
    css float
    Java Array
    nginx ssl 적용
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
밍글링글링
[IT] 플러터 vs 리액트 네이티브 비교
상단으로

티스토리툴바