Flutter VS React Native -2021년

2021년에 크로스 플랫폼 모바일 앱을 구축하려는 경우 두 가지 최선의 선택은 Flutter와 React Native입니다.

두 프레임워크는 모두 하나의 코드베이스에서 인기를 얻었으며 빠른 개발, 네이티브에 가까운 성능 및 부드러운 UI를 약속합니다.

 

하지만 어떻게 다른가요? 그리고 2021년에 어떤 프레임워크를 선택하는 것이 가장 좋을까요? 알아 보려면 계속 읽으십시오.

 

먼저 두 프레임워크에 대해 간략히 소개하겠습니다. 그런 다음 React Native와 Flutter를 직접 비교하여 안내해 드리겠습니다. 이 가이드가 끝나면 다음 프로젝트를 위해 어떤 크로스 플랫폼 프레임워크를 선택해야 하는지 확실히 이해하게 될 것입니다.

 

플러터란?

Flutter 는 크로스 플랫폼 앱 개발 프레임워크입니다. Flutter를 사용하면 단 하나의 코드베이스로 iOS, Android, macOS, Windows 및 웹용 앱을 개발할 수 있습니다.

 

누가 Flutter를 만들었습니까?

Flutter는 2018년 Google에서 만들었습니다. 그러나 Flutter는 다양한 개발자 및 기타 회사 커뮤니티에서 유지 관리하는 오픈 소스 프로젝트입니다.

 

Flutter로 만든 인기 앱은 무엇인가요?

아주 어린 프레임워크임에도 불구하고 꽤 많은 회사들이 Flutter로 대규모 앱을 구축했습니다.

 

Google은 Google Assistant, Google Ads 및 대형 게임 애플리케이션 Stadia 와 같은 다양한 애플리케이션에서 Flutter를 사용하고 있습니다.

 

그러나 다른 회사들도 이 프레임워크를 채택하여 큰 성공을 거두었습니다. Alibaba, Tencent, Baidu 및 ByteDance(TikTok 앱 제작자)와 같은 중국 기술 대기업은 최소한 일부 애플리케이션에 Flutter를 채택했습니다.

 

BMW, eBay, Philips, Sonos 및 Groupon도 다양한 모바일 앱에서 Flutter를 사용했습니다. 그들 중 많은 사람들이 더 빠른 개발 속도와 뛰어난 성능을 보고합니다.

 

BMW는 Flutter로 iOS 및 Android 앱을 구축하고 있습니다.

훌륭한 Flutter 앱의 가장 좋아하는 예 중 하나는 다이어리 앱 Reflectly 입니다. Flutter로 가능한 것을 보여주는 다양한 사용자 정의 인터페이스와 애니메이션을 사용합니다. Reflectly 앱의 개발자는 React Native에서 Flutter로 전환한 이유에 대한 기사 까지 작성했습니다 .

 

위의 모든 예제는 모바일 애플리케이션에 Flutter를 사용했습니다. 데스크톱 및 웹 지원은 최근 Flutter에 추가된 기능이므로 아직 널리 사용되지는 않습니다.

 

Flutter 쇼케이스 사이트 에서 Flutter를 사용하여 업데이트된 앱 목록을 찾을 수 있습니다 .

 

리액트 네이티브란?

React Native는 사용자 인터페이스를 구축하기 위한 크로스 플랫폼 모바일 프레임워크입니다. React 프레임워크와 Javascript의 기능을 활용하여 iOS 및 Android 앱을 개발합니다.

 

누가 React Native를 만들었습니까?

Facebook은 2015년에 React Native를 만들었습니다. 이 회사는 두 가지 주요 모바일 플랫폼에서 개발 노력의 일부를 공유할 방법을 찾고 있었습니다.

오늘날 Facebook은 여전히 ​​프레임워크를 유지 관리하고 발전시키는 데 적극적입니다. 그러나 React Native도 오픈 소스이며 기여하는 개발자 및 회사의 대규모 커뮤니티가 있습니다.

 

React Native로 만든 인기 앱은 무엇입니까?

당연히 많은 Facebook 모바일 앱이 적어도 부분적으로 React Native로 만들어집니다. React Native를 실제로 경험하기 전에 Facebook, Messenger 또는 Instagram을 사용한 적이 있다면.

 

다른 회사의 다른 많은 인기 앱에서 React Native를 사용하기 시작했습니다. Wix, Shopify, Discord Tesla 및 Uber Eats는 모두 일부 모바일 애플리케이션에서 React Native를 사용하고 있습니다.

 

Shopify 의 Shop 앱 은 널리 사랑받고 잘 구현된 React Native 애플리케이션의 가장 최근 예 중 하나입니다.

 

Flutter 대 React Native: 프로그래밍 언어

Flutter는 최신 Dart 프로그래밍 언어를 사용합니다. 과거에 C 스타일 언어를 사용해 본 적이 있다면 Dart는 친숙할 것입니다. Dart는 객체 지향이지만 함수형 언어로 사용할 수 있도록 하는 많은 기능을 포함합니다. 반면에 React Native는 오래된 Javascript를 사용합니다.

 

Javascript 배경 지식이 있는 경우 두 언어 간에 많은 유사점을 알 수 있습니다. 예를 들어 Dart는 비동기 코드에 Promises(Futures라고 함)를 사용하고 async/await 구문을 지원합니다.

 

두 언어를 나란히 놓고 보면 Dart 제작자가 Javascript에서 영감을 받았다는 것이 분명해집니다. 그러나 Dart는 Javascript의 많은 취약한 영역을 개선합니다.

 

Dart는 동적 Javascript에 비해 정적으로 유형이 지정됩니다. 최근 Typescript (Javascript에 유형을 추가함)의 등장은 많은 개발자가 입력된 코드의 부족으로 인해 피할 수 있는 실수에 지쳤음을 증명합니다.

 

Dart 버전 2.0부터 언어도 null-safe 입니다. 즉, 변수를 정의할 때 null 값을 허용해야 하는지 여부를 명시적으로 지정해야 합니다. 제 경험상 이 기능은 매우 큰 기능입니다. null또는 변수와 관련된 Javascript 오류를 얼마나 자주 받았 undefined습니까? 버그의 전체 클래스는 단순히 사라집니다.

 

Typescript를 사용하여 일부 Dart 기능을 React Native 프로젝트에 가져올 수 있습니다. 이 접근 방식을 사용하면 코드베이스가 버그에 덜 취약하고 새 개발자가 더 쉽게 읽을 수 있으므로 이 접근 방식을 적극 권장합니다. 그러나 Typescript는 Javascript의 모든 문제를 해결할 수 없습니다. 언어 기능을 나란히 비교하는 경우에만 Dart가 이깁니다.

 

Javascript(그리고 확장에서는 Typescript까지)는 Dart보다 큰 이점이 있습니다. 이는 세계에서 가장 인기 있는 언어 중 하나입니다. Javascript는 웹, NodeJS의 백엔드 애플리케이션, 심지어 사물 인터넷에도 널리 사용됩니다. 이것은 자바스크립트 주변에 훨씬 더 큰 커뮤니티가 있음을 의미합니다.

 

또한 Javascript를 위해 고용할 수 있는 개발자가 더 많습니다. 이것은 프로젝트에 Flutter 또는 React Native를 선택하기로 결정할 때 핵심 요소가 될 수 있습니다.

 

일자리를 찾는 개발자라면 어떤 프레임워크를 배워야 할까요? 현재 React Native에 사용할 수 있는 작업이 더 있습니다. 또한 시장에 많은 일자리가 있는 웹용 ReactJS를 배우게 됩니다. Flutter에 사용할 수 있는 작업은 더 적지만 수요가 빠르게 증가하는 것 같습니다.

 

요약하자면, Dart는 유형 및 null-safety와 같은 프로그래밍 언어로서의 훌륭한 기능을 가지고 있습니다. 그러나 Javascript는 훨씬 더 대중적이며 더 큰 생태계를 가지고 있습니다.

 

Dart에는 하나의 트럼프 카드가 있으므로 크로스 플랫폼 앱 개발에 적합합니다. 이것이 우리가 다음에 살펴볼 것입니다.

 

Flutter 대 React Native: 성능 및 사용자 경험

Flutter와 React Native가 사용자에 대한 성능과 경험이 어떻게 다른지 진정으로 이해하려면 작동 방식을 더 자세히 살펴볼 필요가 있습니다.

 

React Native부터 시작하겠습니다.

 

React Native는 Javascript 생태계와 React 핵심 라이브러리를 활용합니다. 이는 작성하는 코드의 대부분이 Javascript로 작성되었음을 의미합니다.

 

모바일 장치는 기본적으로 Javascript를 처리하지 않습니다. 그렇다면 Javascript 코드는 어떻게 모바일 애플리케이션으로 변환됩니까? React Native는 자바스크립트로 작성된 코드와 네이티브 코드 사이에 메시지를 전달하는 네이티브 브리지를 사용합니다.

 

React Native 팀은 Bridge 의 성능을 최적화하는 데 많은 시간을 할애 했지만 기본적으로는 여전히 병목 상태입니다. 이것이 React Native Reanimated와 같은 일부 React Native 라이브러리가 더 나은 프레임 속도를 달성하기 위해 복잡한 아키텍처 설정을 사용하는 이유입니다.

 

React Native의 핵심 아키텍처는 기본 성능을 최적화하기 어렵게 만듭니다.

 

React Native에서 사용하는 구성 요소(예: 텍스트 입력 또는 버튼)는 여전히 기본 구성 요소입니다. Javascript 인터페이스를 통해 제어 하기 만 하면 됩니다.

 

앱이 선택한 플랫폼(iOS 또는 Android)의 디자인에 최대한 가깝도록 하려면 좋은 소식입니다. React Native 앱은 현재 플랫폼의 디자인을 잘 채택하고 기본적으로 작성된 앱과 매우 유사하게 보입니다.

 

그러나 오늘날 대부분의 회사는 모든 장치에서 일관된 경험을 달성하기를 원합니다. 그들은 앱이 색상, 글꼴 및 형식 언어와 같은 일관된 브랜딩을 갖기를 원합니다. React Native에서 앱이 iOS에서 작동하고 멋지게 보인다고 해서 Android에서도 동일하게 표시되는 것은 아닙니다!

 

Flutter는 플랫폼 간 애플리케이션을 만드는 데 근본적으로 다른 접근 방식을 사용합니다. Flutter는 Javascript(웹에서 Flutter에 사용됨)와 기계 코드로 컴파일되는 Dart를 사용합니다.

 

이는 Flutter 애플리케이션이 일단 컴파일되면 빠른 성능을 달성할 수 있음을 의미합니다.

 

Flutter는 화면에 기본 구성 요소를 렌더링하지 않습니다. 그것은 처음부터 인터페이스와 애니메이션을 그리는 Skia라는 렌더링 엔진을 사용합니다.

 

이를 통해 UI를 완벽하게 제어할 수 있습니다. 완전히 사용자 정의된 양식과 애니메이션을 구현할 수 있습니다. Flutter는 또한 Android(머티리얼 디자인 위젯)와 iOS(Cupertino 위젯이라고 함) 모두에 대한 기본 구성 요소를 구현합니다.

 

그러나 실제 구성 요소와 얼마나 가깝게 보이는지에 속지 마십시오. 그것들은 Flutter의 다른 것들처럼 처음부터 화면에 그려집니다.

단점은 Flutter 팀이 프레임워크의 모든 인터페이스 구성 요소를 구현해야 한다는 것입니다. 새 구성 요소는 일정 시간이 지난 후에야 프레임워크에 도달할 수 있습니다.

 

Flutter의 기본 디자인 사양처럼 앱을 만들 수는 있지만 이 작업에 적합한 도구는 아닐 수 있습니다. 많은 포크 논리를 작성하지만 여전히 원하는 결과를 얻지 못할 수 있습니다.

 

두 플랫폼 모두에서 일관된 디자인을 원한다면 Flutter가 정말 빛납니다. 대부분의 경우 앱은 iOS, Android 및 기타 플랫폼에서 동일하게 보입니다.

 

웹에서 Flutter 및 React Native

지금까지 모바일 애플리케이션에 대해 살펴보았습니다. 네이티브 모바일 애플리케이션과 웹 전반에 걸쳐 일관된 경험을 하고 싶다면 어떻게 해야 할까요?

 

웹사이트에 훌륭한 SEO가 필요한 경우 아래 옵션 중 어느 것에도 만족하지 못할 것입니다. 공개적으로 사용할 수 있도록 페이지를 최적화하려면 웹 경험을 별도로 구축하는 것이 가장 좋습니다.

 

그러나 웹 사이트가 인증 뒤에 보호되어 있거나 SEO에 대해 그다지 신경 쓰지 않는다면 Flutter와 React Native Web을 모두 진지하게 고려할 수 있습니다.

 

React Native Web 은 원래 웹 프레임워크인 ReactJS와 다릅니다. React Native Web을 사용하면 웹에 대한 몇 가지 조정으로 모바일 코드베이스를 활용할 수 있습니다. Twitter 는 웹사이트 경험을 위해 React Native Web을 사용해 왔으며 큰 성공을 거두었습니다.

React Native Web은 상당히 성숙해졌으며 인기 있는 React Native 개발 프레임워크 Expo 에도 포함되어 있습니다. 이 시점에서 React Native에서 대부분의 코드를 안전하게 재사용하고 웹에서 사용할 수 있습니다!

 

Flutter는 3월 최신 버전 Flutter 2에서 공식적으로 웹 지원을 추가했습니다. 즉, Flutter for Web은 프로덕션 환경에서 안정적으로 사용할 수 있습니다.

 

Flutter로 웹 앱이 어떤 모습일 수 있는지에 대한 매우 유망한 첫 번째 예는 Rive App 입니다. Rive는 웹 및 데스크톱 플랫폼에서 Flutter와 함께 작동하도록 애니메이션 도구를 재구축했습니다. 결과는 인상적입니다.

 

깨끗하고 성능이 좋은 웹 응용 프로그램을 생성할 수 있도록 하는 명시적 컴파일 대상인 Javascript로 앞에서 언급한 Dart.

그러나 Flutter 애플리케이션은 일반적인 HTML 구조와 유사하지 않습니다. Flutter는 웹 캔버스 를 활용하여 사용자 정의 UI를 그립니다. 이것은 검색 엔진 지원이 열악하고 아마도 결코 좋지 않을 것임을 의미합니다.

 

그러나 예상치 못한 이점이 있을 수 있습니다. 웹은 특정 유형의 복잡한 데이터 기반 앱을 위해 구축된 적이 없습니다. 예를 들어 Google은 최근 기본 HTML input또는 textarea요소 대신 웹 캔버스를 사용하여 문서 앱을 구현했습니다 . 협업 편집기는 기존 웹 도구 상자로 구축하기 어려운 것 중 하나입니다.

 

웹 표준을 따르는 공개적으로 액세스 가능한 웹 사이트를 구축하려는 경우 가장 좋은 방법은 여전히 ​​웹에 대해 별도의 코드베이스를 사용하는 것입니다. 이미지 로드 및 SEO 개선을 ​​위한 많은 최적화와 함께 제공되는 NextJS와 같은 프레임워크를 사용할 수 있습니다.

React Native를 사용하고 코드베이스를 잘 구성했다면 대부분의 애플리케이션 로직과 상태를 재사용할 수도 있습니다. 인터페이스 구성 요소 레이어를 교체하기만 하면 됩니다.

 

Flutter를 사용하는 경우 Dart가 아닌 다른 언어로 별도의 코드베이스를 유지해야 합니다.

 

따라서 React Native 또는 Flutter를 선택하기 전에 프로젝트와 웹 애플리케이션에 대한 요구 사항이 실제로 무엇인지에 대해 깊이 생각하십시오.

 

데스크탑에서 Flutter 및 React Native

React Native와 Flutter 프로젝트는 모두 데스크탑 앱으로 컴파일할 수 있습니다.

 

React Native에서 가장 유망한 라이브러리 는 Microsoft에서 개발했습니다(누가 생각했을까요?). 이것은 React(더 넓게는 Javascript) 세계에서 일반적인 패턴입니다. 프레임워크를 확장하기 위해 추가 라이브러리를 설치해야 하는 경우가 많습니다.

 

macOS 및 Windows용 React Native는 아직 초기 단계이며 아직 버전 1.0을 출시하지 않았습니다. 그러나 React 생태계에서 고성능 데스크톱 앱을 개발할 것을 약속하며 React Native를 선택할 때 훌륭한 대안이 될 수 있습니다.

 

Flutter는 지난 몇 년 동안 데스크톱 지원을 위해 노력해 왔으며 안정적인 채널에서 이를 릴리스했습니다. 아직 사용할 수 있는 참조 앱이 많지 않지만 프레임워크는 처음부터 모든 플랫폼을 지원하도록 구축되었기 때문에 기본 데스크톱 앱에 지금은 더 나은 선택입니다.

 

어느 것이 배우기 더 쉽습니까? 네이티브 또는 Flutter에 반응합니까?

이전에 작업한 내용에 따라 다릅니다. Javascript에 대한 경험이 있습니까? React Native는 선택하기 가장 쉽습니다. 그러나 Dart는 Javascript와 유사합니다. Dart의 기초를 배우고 Flutter 앱 작성을 시작하는 데 오랜 시간이 걸리지 않을 것입니다.

 

두 프레임워크 모두 Youtube, Udemy, Medium 및 기타 장소에서 시작하고 특정 주제에 대한 도움말을 찾을 수 있는 끝없는 콘텐츠를 보유하고 있습니다.

 

Dart와 Flutter의 문서화도 시작하기에 좋습니다. 언어와 프레임워크를 간결하게 제시합니다.

 

다음이 필요한 앱을 만들고 있습니까?

• 부드러운 애니메이션
• 모든 플랫폼에서 유사하게 보입니다.
• 데스크톱에서 뛰어난 기본 환경이 필요합니다.
• SEO 또는 시맨틱 HTML이 필요하지 않습니다.

Flutter는 잘못될 수 없습니다!

 

Flutter는 젊지만 번성하는 생태계를 보유하고 있으며 선택한 플랫폼에서 거의 모든 인터페이스를 만들 수 있도록 잘 설계된 기반을 갖추고 있습니다.

 

다음과 같은 앱을 만들고 있습니까?

• 타겟 플랫폼의 디자인 언어에 적응
• 주로 모바일에서 시작됩니다.
• ReactJS 웹 앱으로 개발
• 웹 엔지니어 팀에 의해 개발되었습니다.

React Native를 선택하십시오!

 

React Native는 매일 사용하는 대규모 애플리케이션에서 사용됩니다. 전투 테스트를 거쳤으며 주변에 광범위한 개발자 커뮤니티와 패키지 생태계가 있습니다.

 

 

원래 https://johannes.co 에 게시되었습니다 .