Flutter와 React Native: 모바일 앱 개발을 위해 무엇을 선택해야 할까요?

게시 됨: 2018-05-18

Facebook의 React Native와 Google의 Flutter는 어떤 프레임워크가 가장 좋은지 결정하는 경쟁에서 최근 엄청난 화제를 불러일으키고 있습니다. 이 기사에서 우리는 그들이 업계에서 어떻게 서로 경쟁하는지 살펴볼 것입니다.

플러터란?
리액트 네이티브란?
Flutter와 React Native의 차이점: 자세한 그림.
React Native용 Flutter
Flutter의 새로운 기능은 무엇입니까?
React Native의 새로운 기능은 무엇입니까?
Flutter와 React 네이티브 토론에 대해 자주 묻는 질문.

예전에는 모바일 앱 개발 산업이 iOS와 안드로이드용 앱을 개별적으로 개발하는 데만 국한되었던 시절이 있었지만 지금은 상황이 100% 바뀌었습니다.

오늘날, 하나의 코드베이스에서 Android와 iPhone 모두에서 작동하는 단일 앱을 개발하는 데 탁월한 모바일 앱 개발 회사에 투자하는 것이 트렌디한 비즈니스 의제가 되었습니다.

모든 크로스 플랫폼 앱 개발 가이드에는 Facebook이 2015년 React Native라는 크로스 플랫폼 앱 개발 프레임워크를 출시하고 대중화했을 때 '트렌드'가 주류가 되었다고 나와 있습니다.

그 이후로 기업들은 React Native 앱 개발 이 제공해야 하는 비용과 개발 이점을 활용하기 위해 ' React Native가 다음 플랫폼에 적합한 플랫폼입니까? 앱? '. 따라서 React Native 대 Native 토론을 더욱 강화합니다.

따라서 의심의 여지없이 React Native가 인기를 얻었고 LinkedIn, Instagram, Walmart 등과 같은 인기 사진이 플랫폼으로 이동했습니다.

2018년 3월, 다소 임팩트 있는, 움푹 패인 인기.

Mobile World Congress에서 Google은 Flutter라는 자체 크로스 플랫폼 SDK의 베타 릴리스를 발표했습니다. 그리고 불과 몇 개월 만에 Flutter를 사용한 모바일 앱 개발 은 AndroidX 지원 과 같은 기능의 형태로 Google이 부여한 힘에 힘입어 이미 React Native의 공정한 각광을 받기 시작했습니다. , 게임 컨트롤러 등 .

이제 오늘로 돌아옵니다.

현재 상황은 Flutter와 React Native가 견인력과 대량 채택의 공개 전쟁에 들어갔고 두 프레임워크 중 하나에 대한 검색 쿼리가 ' React Native vs Flutter 2019 ' 라는 결과와 함께 돌아온다는 것 입니다.

두 프레임워크가 iOS와 Android용 앱을 빌드 하는 최고의 기본 솔루션이라는 비교를 위한 기반을 설정하기 위해 무엇을 의미하는지 다시 살펴보겠습니다 .

플러터란?

Flutter Engine은 오늘날 업계에서 작동 하는 최고의 오픈 소스 크로스 플랫폼 앱 개발 프레임워크 중 하나입니다. 2017년 구글에서 개발했습니다.

이제 프레임워크에 대해 훨씬 더 명확한 아이디어를 얻기 위해 Flutter의 장단점을 살펴보겠습니다.

플랫폼 간 앱을 빌드할 때 다음과 같은 이점이 있습니다.

완전한 개발 생태계
고도로 사용자 정의 가능
Google은 매우 안정적입니다.
핫 리로드 기능
오픈 소스 및 무료 사용

또한 다음과 같은 몇 가지 단점이 있습니다.

큰 응용 프로그램 크기
기본 도구 및 기술에 의존하여 앱 구축

프레임워크의 도움으로 만든 앱에는 Alibaba, Hookle, Topline, OfflinePal, Hamilton 등이 있습니다.

리액트 네이티브란?

페이스북이 2015년 자체 크로스 플랫폼 앱 개발 기술로 개발한 오픈소스 프레임워크다. 이를 통해 개발자는 모바일 앱을 빌드하는 데 필요한 기본 플랫폼 기능 외에도 React 및 JavaScript를 사용할 수 있습니다.

다음과 같은 일련의 이점이 있습니다.

네이티브 UI 구성 요소 구현
기성품 구성 요소
기본 기능에 대한 액세스 권한 부여
핫 리로드
높은 신뢰성
플랫폼별 코드
오픈 소스
웹 기능을 위한 React Native

그러나 크로스 플랫폼 모바일 앱 개발 프레임워크에는 다음과 같은 몇 가지 단점도 있습니다.

비 원활한 탐색
복잡한 UI

React Native로 만든 앱에는 Facebook, Skype, Artsy, Vogue, Bloomberg, Tesla 등이 있습니다.

최고의 크로스 플랫폼 앱 개발 을 알기 위해 비교 인포그래픽을 그릴 수 있을 정도로 해부가 이루어졌습니다 .

Flutter와 React Native 의 차이점: 자세한 그림

프레임워크 성숙도

React Native는 2015년에 처음 출시되었으며 Flutter의 첫 베타 버전은 2월 26일부터 3월 1일 사이에 개최된 Mobile World Congress에서 이루어졌습니다. 따라서 성숙도에 대해 말하면 Flutter는 React Native에 비해 덜 성숙합니다. 아직 초기 단계이기 때문에 Flutter 애플리케이션 개발 은 성숙하기까지 시간이 걸릴 것입니다.

네이티브 반응 – 1

플러터 – 0

프로그래밍 언어

React Native는 크로스 플랫폼 애플리케이션을 구축하기 위해 JavaScript를 사용합니다. 다른 유명한 JavaScript 프레임워크 외에 React와 함께 주로 사용됩니다. 따라서 웹 개발자는 모바일 앱 여정을 매우 쉽게 시작할 수 있습니다.

반면 Flutter는 Dart 프로그래밍 언어를 사용합니다. 이 언어는 2011년 Google에 의해 도입되었습니다. 이 언어는 배우고 시작하기가 상당히 쉬운 여러 객체 지향 개념을 사용합니다.

그러나 JavaScript가 개발자가 여정을 시작하는 언어인 것을 보면 React Native가 쉽다는 사실이 더 많은 점수를 얻습니다.

네이티브 반응 – 1

플러터 – 0

설치

React Native 프레임워크는 NPM(Node Package Manager)을 통해 설치됩니다. JavaScript 지식이 있는 개발자의 경우 설치 프로세스가 매우 쉽습니다.

Flutter는 Github에서 특정 플랫폼용 바이너리를 다운로드하여 설치합니다. macOS의 경우 추가 flutter.zip 파일을 다운로드하여 PATH 변수로 추가해야 합니다.

Flutter 프레임워크와 React Native 모두 OS용 기본 패키지 관리자를 사용한 한 줄 설치가 부족하지만 Flutter 설치에는 한 단계가 더 필요합니다. 이 때문에 요점은 React Native로 이동합니다.

네이티브 반응 – 1

플러터 – 0

구성 및 설정

Flutter의 설정 프로세스는 React Native에 비해 훨씬 간단합니다. Flutter는 시스템 문제에 대한 자동 점검 기능을 제공하는데, 이는 React Native가 크게 놓치는 부분입니다.

플러터 - 1

네이티브 반응 – 0

기술 아키텍처

React Native 아키텍처는 JavaScript 브리지로 알려진 JS 런타임 환경 아키텍처에 의존합니다. Facebook의 Flux 아키텍처를 사용합니다. 반면 Flutter는 기본 모듈과의 통신을 위해 반드시 브리지가 필요하지 않은 Dart 프레임워크를 사용합니다.

Flutter 엔진은 프레임워크 자체에 많은 기본 구성 요소와 함께 제공되고 기본 구성 요소와 통신하기 위한 브리지가 필요하지 않기 때문에 여기서 요점은 Flutter입니다.

플러터 – 0

네이티브 반응 – 1

사용자 인터페이스

Flutter 앱 개발 서비스 와 React Native 서비스 모두 UI 개발에 사용하는 빌딩 블록과 관련하여 극명한 차이가 있습니다. 한편으로 React Native는 타사 또는 사용자 정의 구성 요소의 도움으로 기본 Android 및 iOS 구성 요소를 활용하는 반면 Flutter는 100% 사용자 정의된 독점 위젯으로 작동합니다.

이 위젯은 Google용 Material Design과 Apple용 Cupertino에 모두 있으므로 UI를 Flutter가 React Native를 대체 할지 여부를 결정하는 가능한 요소 중 하나가 됩니다.

네이티브 반응 – 0

플러터 – 1

네이티브 모양

네이티브 룩앤필은 Flutter와 모바일 앱 개발을 위한 React Native 모두 USP로 홍보하는 것입니다. React Native Development의 신호인 성능은 전 세계가 들여다보고 탐색할 수 있지만 Flutter에 대한 보장은 마찬가지입니다.

회사에서 Flutter 개발자를 고용 하는 이유는 타사 구성 요소 없이 장치의 핵심 기능을 사용하기 위한 기능이며 iOS 및 Android용 기본 모양과 느낌 앱을 개발하는 여정에 필요한 것이 있습니다.

네이티브 반응 – 1

플러터 – 1

압형

도구와 관련하여 Flutter는 아직 React Native와 일치하지 않습니다. Flutter는 최소 3년 이상 된 것이므로 이를 지원하는 IDE 및 도구의 범위는 훨씬 더 많습니다.

그러나 Flutter 프레임워크는 Visual Studio Code, IntelliJ 아이디어 및 Android Studio와의 호환성을 확실히 자랑할 수 있습니다. 또한 Flutter의 디버거, Dart 린터, 자동 형식, 코드 분석기 및 자동 형식 도구는 매우 좋은 평가를 받았습니다.

네이티브 반응 – 1

플러터 – 0

개발자의 생산성

JavaScript에 대한 전문 지식을 보유한 개발자에게 React Native는 매우 쉽습니다. 개발자의 시간을 크게 절약해주는 핫 리로드 기능이 함께 제공됩니다. 또한 개발자는 원하는 IDE 또는 텍스트 편집기를 자유롭게 사용할 수도 있습니다.

Flutter에는 핫 리로드 기능도 있습니다. 그러나 개발자가 새로운 Flutter 개념을 배우고 사용해야 하는 경우 학습 곡선이 약간 더 큽니다. 또한 새로운 Dart는 많은 텍스트 편집기와 IDE를 지원하지 않아 개발자 생산성이 저하됩니다.

더 성숙해진 React Native는 언어 기능 및 IDE 측면에서 Flutter 앱 개발 회사 에 더 많은 개발자 지원을 제공합니다. 이를 위해 점수는 React Native로 이동합니다.

네이티브 반응 – 1

플러터 – 0

선적 서류 비치

React Native 문서가 있는 혼란스러운 상태는 오픈 소스가 많은 프레임워크에서 예상되지만 Flutter 문서에서 배울 것이 많습니다.

Google은 명확하고 상세하며 잘 공식화된 문서로 유명하며 Flutter를 통해 기대를 계속했습니다.

2019년 Flutter와 React Native 의 현재 비교를 보면 Flutter가 뒤처지고 있음을 알 수 있습니다. 그러나 상황은 바뀔 것입니다.

Flutter는 매우 짧은 시간에 비즈니스로부터 모든 적절한 관심을 받기 시작했습니다. 실제로 Showcase 페이지를 보면 Flutter를 사용하여 만든 앱이 현재 사용되고 있는 복잡한 범주에 속한다는 것을 알 수 있습니다. 동시에 여러 사람에 의해.

여기에 온-포인트 문서와 함께 포트폴리오에 지속적으로 추가하는 라이브러리를 추가하면 크로스 플랫폼 세계에서 사용할 준비가 된 프레임워크를 얻을 수 있습니다.

사실 구글 자체도 페이스북에 정면으로 도전하는 것을 부끄러워하지 않고 있다.

React Native에 대한 Flutter 심층 문서의 존재를 놓친 경우를 위해 요약된 버전이 있습니다.

React Native용 Flutter

Flutter for React Native는 개발자가 Flutter 앱 개발에 현재 React Native 지식을 적용하는 데 도움이 되는 Google 문서입니다.

이 문서는 새로운 Flutter 앱을 만드는 과정을 자세히 설명합니다 . 이 링크는 특히 반응 네이티브용 플러터를 설명합니다. 이 페이지는 이미 반응 네이티브에서 작업한 개발자가 Flutter를 쉽게 켤 수 있음을 보여주기 위한 페이지입니다.

이 문서는 iOS 및 Android 앱 개발자 모두 가 React Native에서 벗어나 Flutter의 간편함과 유연성을 경험하기 위한 분명한 초대장입니다 .

그리고 개발자가 React Native에서 Flutter로 전환하도록 안내하는 얼굴 문서는 Google이 대량 채택을 위한 경쟁에서 React Native를 전달하려는 유일한 방법은 아닙니다. 교차 플랫폼 SDK 에코시스템에 Material Theming 및 Cupertino 위젯을 추가하려는 움직임은 Flutter SDK를 사용하여 개발된 앱에 표현력이 풍부한 사용자 인터페이스의 완전히 새로운 펀치를 추가했으며, React Native에는 여전히 부족하고 다른 디자인 키트에 의존합니다.

플러터 - 1

네이티브 반응 – 0

앱 성능

Flutter 대 React Native 성능 비교 에 대해 이야기하면 Flutter가 왕관을 차지합니다. React Native Development에 비해 훨씬 빠릅니다. 장치 기본 구성 요소와 상호 작용을 시작하기 위한 JavaScript 브리지가 없기 때문에 개발 속도 와 실행 시간이 크게 빨라집니다.

Flutter가 애니메이션 표준을 60fps로 설정했다는 점에 추가된 이것은 고성능의 분명한 신호입니다. 마지막으로, Flutter는 Android 및 iOS용 네이티브 ARM 코드로 컴파일되기 때문에 성능은 결코 직면하지 않을 한 가지 문제입니다.

네이티브 반응 – 0

플러터 - 1

수명 주기 관리

일반적으로 React Native는 앱 수명 주기 처리 및 최적화를 단순화하는 데 훨씬 더 나은 작업을 수행하는 경향이 있습니다. Flutter는 애플리케이션 상태를 명시적으로 저장하기 위한 도구를 제외하고 상태 비저장 및 상태 저장 조건만 허용하는 위젯 상속 작업 범위만 제공합니다.

네이티브 반응 – 1

플러터 – 0

코드 재사용

React Native를 사용하면 플랫폼의 차이점을 수용하면서 코드를 한 번 작성하고 어디든지 제공할 수 있습니다. 즉, 때때로 개발자는 자신이 실행 중인 플랫폼을 살펴보고 플랫폼을 기반으로 다른 구성 요소 집합을 로드해야 할 수 있습니다.

Flutter의 코드베이스는 훨씬 더 재사용이 가능합니다. 이를 통해 단일 UI 위젯 트리를 정의한 다음 정의된 로직을 재사용할 수 있으므로 많은 차별화가 필요하지 않습니다.

Flutter가 제공하는 편의성을 위해 핵심은 프레임워크입니다.

네이티브 반응 – 0

플러터 - 1

빌드 및 릴리스 자동화 도움말

React Native보다 Flutter의 직접적인 이점 중 하나는 빌드 및 릴리스의 자동화 지원입니다. 공식 React Native 문서에는 App Store에 iOS 앱을 배포하는 자동화된 방법이 없습니다. Xcode에서 앱 배포를 위한 수동 프로세스를 제공합니다. 또한 React Native는 자동화를 구축하고 출시하기 위해 타사 라이브러리에 의존합니다.

Flutter의 핵심 기능은 강력한 명령줄 인터페이스와 함께 제공됩니다. 개발자는 명령줄 도구를 사용하여 앱 바이너리를 개발할 수 있습니다.

Flutter가 놀라운 자동화 도구와 함께 제공되고 명령줄에서 앱을 배포하는 데 사용된다는 사실은 경주에서 React Native보다 앞서 있습니다.

플러터 - 1

네이티브 반응 – 0

테스트 지원

JavaScript 프레임워크 에 있으므로 React Native에 사용할 수 있는 단위 수준 테스트 프레임워크는 몇 개뿐입니다. 또한 통합해야 할 때 React 네이티브에는 공식 지원이 없습니다. 앱 테스트에 사용할 수 있는 Detox 및 Appium과 같은 일부 타사 모양이 있지만 공식적으로 지원되지는 않습니다.

Flutter는 단위, 통합 및 위젯 수준에서 앱을 테스트하기 위한 광범위한 테스트 기능을 제공합니다. 그것은 심지어 훌륭한 문서와 함께 제공됩니다.

테스트 지원의 범위는 React Native보다 Flutter의 장점을 분명히 강조합니다.

네이티브 반응 – 0

플러터 - 1

CI/CD 및 DevOps 지원

React Native는 CI 및 CD 에 대한 공식 문서를 제공하지 않습니다 . 반면 Flutter에는 Flutter 앱용 CI/CD를 매우 쉽게 추가할 수 있는 여러 링크가 포함된 전체 섹션이 있습니다.

플러터 - 1

네이티브 반응 – 0

커뮤니티 지원

2015년에 출시된 React Native는 시간이 지남에 따라 엄청난 인기를 얻었습니다. 전 세계에서 여러 회의 및 회의를 개최하는 대규모 커뮤니티가 지원됩니다. Flutter는 개발자 커뮤니티에서 많은 관심을 받고 있지만 네이티브 앱 개발 회사에 반응하는 경우와 같이 대규모 커뮤니티 백업에 도달할 시간이 있습니다 .

Flutter 커뮤니티에는 개발자를 위한 리소스가 훨씬 적기 때문에 요점은 Flutter보다 React Native의 이점에 대한 분명한 증거입니다.

네이티브 반응 – 1

플러터 – 0

산업 채택

Flutter는 크로스 플랫폼 업계에서 상당히 새롭기 때문에 크로스 플랫폼 앱 개발을 위해 SDK를 채택한 기업의 수는 매우 적습니다. 반면에 앱 개발에 react native를 사용하는 이점은 프레임워크를 사용하여 개발된 앱의 쇼케이스 페이지가 훨씬 더 높다는 것입니다.

그러나 새로운 브랜드가 된 후에도 파트너 Flutter 애플리케이션 구축 회사 와 함께 Google AdWords 또는 Hamilton Musical, 심지어 Alibaba와 같은 전자 상거래 대기업과 같이 다소 복잡한 SDK에서 앱을 출시한 것은 사실입니다.

네이티브 반응 – 1

플러터 – 0

Flutter vs React Native 2019 화재를 더욱 부추기는 것은 두 가지 최고의 크로스 플랫폼 도구가 모두 도입된 새로운 추가 사항입니다.

2018년과 지금 사이, 특히 2019년의 Google IO 이벤트 발표 이후 , 두 영역 모두에 많은 새로운 변경 사항이 적용되어 이제 큰 경쟁의 길을 열었습니다.

2019년 Flutter와 React Native의 새로운 기능을 살펴보겠습니다.

Flutter의 새로운 기능은 무엇 입니까 ?

Flutter의 첫 번째 베타 릴리스 이후로 프레임워크는 성능 기능과 채택률 면에서 성장해 왔습니다.

Flutter는 2019년 7월에 다음과 같은 새로운 기능과 개선 사항이 포함 된 1.7 릴리스 를 출시했습니다.

Android X 지원 – 이를 통해 Flutter 앱 개발자 는 이전 버전과의 호환성 기능을 손상시키지 않고 설계된 Android 앱을 업데이트할 수 있습니다.

OpenType 풍부한 타이포그래피 기능 – Flutter는 앱 UI 경험을 향상시킬 표 및 구식 숫자, 슬래시 0, 스타일 세트 등과 같은 새로운 타이포그래피 기능 세트를 출시합니다.

또한 웹용 Flutter는 스마트폰을 넘어 Flutter를 Chromebook, Windows 및 Mac으로 옮기는 데 중점을 두고 제공되었습니다. Flutter로 데스크톱 앱 개발을 현실로 만듭니다. 이것은 전체적으로 Flutter의 미래 범위가 더 넓고 2019년에 Android 및 iOS 개발자가 고려해야 한다는 인상을 줍니다 .

2019년은 Flutter가 1.12 버전을 출시하면서 끝이 났습니다 . Flutter Interact 이벤트 에서 앰비언트 컴퓨팅에 중점을 둔 몇 가지 새로운 기능과 개선 사항이 포함된 버전이 발표되었습니다.

이 외에도 다음과 같은 몇 가지 다른 개선 작업을 수행했습니다.

다트 2.7
수정된 다트패드
베타 웹 지원
macOS 데스크탑 지원
앱에 추가 업데이트
새로운 Google 글꼴 패키지
iOS 13 다크 모드 지원

React Native의 새로운 기능은 무엇입니까 ?

작년 11월에 React Native는 2018년과 2019년에 대한 로드맵을 마련하여 React Native에서 모바일 앱을 빌드 하는 전체 이벤트를 훨씬 더 흥미롭게 만들었습니다.

목록에 추가된 요소는 모두 React Native가 의미하는 것을 재정의하도록 설정된 것입니다.

그들은 다음을 계획했습니다:

API를 안정적으로 만들기
더 나은 GitHub 리포지토리 만들기
더 나은 문서
React Native의 표면적이 사용되지 않고 핵심이 아닌 구성 요소에 의해 제거되고 있습니다.
오픈 소스 커뮤니티에서 유명한 도구 및 플랫폼에 대한 지원을 개선할 계획입니다.
Facebook은 주요 변경 사항을 줄이기 위해 Public API를 통해 React Native를 사용할 것입니다.

이 외에도 React Native 0.60은 2019년 7월 에 다음과 같은 새로운 변경 사항과 함께 출시되었습니다.

새 화면 – App.js 편집, 문서 링크, 디버그 메뉴 프로세스 등과 같은 관련 지침을 보여주는 새 화면이 도입되었습니다. 이는 Flutter보다 React Native의 사용자 친화성과 인기도를 높이기 위한 커뮤니티의 노력으로 간주됩니다.

Android X 지원 - Flutter와 마찬가지로 React Native는 AndroidX(Android Extension Library)도 지원합니다. 이것은 당신이 React Native를 선택하든 Flutter를 선택하든 상관없이 AndroidX가 모바일 앱 개발 프로세스의 일부가 될 것임을 의미합니다.

2019년 9월, React Native는 Fast Refresh라는 완전히 새로운 재로딩 경험과 함께 0.61 버전을 출시했습니다 .

이 버전에서는 실시간 다시 로드 및 핫 다시 로드 기능이 빠른 새로 고침이라는 단일 기능으로 병합되었습니다.

다음은 React Native 0.61 기능을 정의하는 원칙입니다.

최신 React를 완벽하게 지원합니다.
오타 후 복구되고 필요할 때 전체 다시 로드로 폴백합니다.
침입 코드 변환을 수행하지 않습니다.

빠른 새로 고침 외에도 다음과 같은 다른 중요한 개선 사항도 있습니다.

use_frameworks를 수정합니다! 코코아팟 지원
useWindowDimensions 후크 추가
React가 16.9로 업그레이드되었습니다.

이러한 변경 사항이 현재 도입되거나 Flutter 및 React Native 생태계에 추가될 준비가 됨에 따라 전쟁은 이제 더 치열해질 것입니다.

결론적으로, Flutter는 React Native가 시간이 지남에 따라 모은 인기를 능가하는 데 시간이 걸릴 것입니다. 그리고 Flutter가 모바일 앱 개발의 미래라고 선언하는 데는 시간이 걸리겠지만 시간을 주면 React Native의 사용자 기반을 왔다갔다 할 것입니다.

Flutter와 React 네이티브 토론에 대해 자주 묻는 질문

Q. 플러터와 리액트 네이티브 중 2020년에는 어떤 것을 선택해야 할까요?

두 프레임워크가 모두 잘 작동하고 있기 때문에 말하기 어렵습니다. 따라서 이 기사에서 공유하는 비교 요소를 기반으로 결정하는 것이 좋습니다.

Q. 플러터가 반응 네이티브를 대체합니까?

네, Flutter는 React Native를 대체하고 미래에 크로스 플랫폼 개발의 지배자가 될 것입니다.

Q. 플러터의 인기는?

Flutter는 시장에 새로 도입되었지만 시장에서 상당한 인기를 얻었습니다. Reinvently, Hamiliton, Topline 및 Google Ads와 같은 다양한 인기 브랜드는 UI 프레임워크를 채택했습니다.

Q. react native는 아직 베타 버전인가요?

전혀 그렇지 않다.

Q. 왜 플러터가 네이티브 반응보다 나은가요?

Google이 지원하는 Flutter는 React Native보다 더 많은 기본 경험을 제공하고 새로운 기능을 도입하기 위해 타사 라이브러리에 많이 의존하지 않습니다. 이것은 Flutter가 React Native보다 우위에 있습니다.