크로스 플랫폼 프레임워크의 양대산맥, React Native와 Flutter의 차이점과 장단점을 분석해보려고 한다.

1. React Native

React Native는 페이스북(현 메타)에서 개발한 크로스 플랫폼 프레임워크이다. 페이스북에서 React 라이브러리를 기반으로 개발하였고, 컴포넌트의 라이프사이클은 동일하지만 React와 달리 HTML은 사용되지 않는다. HTML 대신 React Native에서 자체 제공하는 컴포넌트를 사용한다.

1-1. 장점

1. 주 사용언어: JS, TS

React Native는 React와 같이 주 언어로 JavaScript와 TypeScript를 사용한다. 따라서 웹 개발자의 경우 다른 개발 분야에 비해 상대적으로 접근하기가 용이하다.

2. 커뮤니티가 가장 크다

현재 시장에 나와있는 크로스 플랫폼 프레임워크 중에서 가장 선두주자이기 때문에 크로스 플랫폼 커뮤니티 중에서는 React Native가 압도적으로 크다. 커뮤니티 규모가 큰 만큼 에러 발생 시 관련 정보를 쉽게 얻을 수 있다.

관련 내용을 정정합니다!!!
StackOverflow 스택 사용률, 토스 SLASH 영상 등을 참고한 결과 2019년 이후 Flutter의 사용률이 React-Native를 앞선 것으로 확인되었습니다.

3. 운영체제 순정 UI를 사용하기 쉽다.

React Native는 안드로이드, iOS 등 운영체제 네이티브 코드로 작성한 브릿지 모듈을 사용해 운영체제와 통신하는 방식으로 동작한다. 운영체제와 직접 통신하기 때문에 각 운영체제의 순정 UI를 사용하기가 쉽다.

4. 기존 출시된 앱을 원격으로 업데이트할 수 있다.

내가 따로 Velog에 포스트로 올린 내용이지만, React Native는 CodePush라는 시스템을 사용할 수 있다. 이 점이 바로 React Native와 Flutter를 비교할 때 가장 대표적인 장점이다. => React Native CodePush 연결 방법
CodePush는 MS 자회사인 Visual Studio AppCenter에서 운영하고 있는 원격 업데이트 서비스이다. 이걸 사용하면 기존 구글 플레이 또는 앱스토어에 출시되어 있는 앱의 수정사항을 원격으로 업로드할 수 있다. (단, JS/TS로 작성된 코드만 업로드할 수 있다.)

1-2. 단점

1. 웹 개발자의 접근성이 낮다고 이야기하기가 좀 애매하다.

React Native가 React를 기반으로 개발이 되어 라이프사이클이나 사용할 수 있는 Hook들이 거의 비슷한 것은 사실이지만, 그 점들이 웹 개발자가 React Native로 접근하는데 접근성이 낮다고 말할 수는 없다.
React는 웹이고, React Native는 모바일이다. 웹과 모바일은 완전히 환경이 다르다. 만약 웹 개발자가 React Native 개발을 시도하면, 웹에서는 거의 신경쓸 일이 없는 부분들까지도 검토가 많이 들어가야 할 수 있다.
또한, React Native는 엄연한 모바일이기 때문에 안드로이드, iOS에 대한 기초적인 지식이 있어야 앞으로 발생할 이슈들을 효과적으로 대응할 수 있다.

2. 오픈소스 패키지를 사용하는데 위험부담이 일부 따른다.

React Native은 React와 마찬가지로 오픈소스 패키지에 거의 대부분을 의존할 수 밖에 없다. Firebase, 웹뷰, 차트 등 React Native에서 자체적으로 구현할 수 없는 기능들은 전적으로 오픈소스 패키지에 의존할 수 밖에 없다. 만약 사용하고자 하는 패키지가 많은 개발자들로부터 검증된 패키지가 아니면 앱 기능 구동에 문제가 발생할 수 있다. 당장 문제가 발생하지 않는다면, 내 경험상 언젠간 반드시 발생하게 된다.

3. 일부 UI를 그리는데 어려움이 심하게 따른다.

React Native에서 대표적으로 그림자, 애니메이션 등을 구현하는데 큰 어려움이 따른다. 특히 내 경험상 안드로이드에서 그런 어려움이 많이 따른다. 따라서, 이런 것들을 개발하기 위해서는 오픈소스 UI 컴포넌트 라이브러리의 사용을 고려해봐야 한다.

4. 프로젝트의 React Native 버전 업데이트가 매우매우 어렵다.

프로젝트 생성 시 설정된 React Native 버전을 업데이트하는게 매우매우 어려워 사실상 불가능에 가깝다. 단순히 버전만 업데이트하면 새 버전에서의 호환성이 안맞기 때문에 많은 시간을 마이그레이션하는데 할애해야 한다. 이게 React Native의 가장 대표적인 단점이다.

react native CLI로 마이그레이션 하는 방법도 있다곤 하지만, 내 생각에서는 CLI도 믿을 수는 없다.

특히 개인이 아닌 회사 단위로 진행하는 프로젝트의 경우 이런 위험부담이 너무 크기 때문에 절대로 시도하면 안된다. 만약 회사 단위의 프로젝트에서 앱 전면 개편을 하거나 하는 상황인 경우, 프로젝트를 아얘 새로 생성하는 것이 좋다.
(개발자로서 정말정말 냉정하게 생각해봐도)기존 프로젝트를 업데이트해서 마이그레이션하는 방법으로 문제를 해결하기보다 프로젝트를 아얘 처음부터 다시 만드는 것이 훨씬 쉽다.
이 부분은 매우매우 중요하고, React Native 개발자로서 이 부분은 내가 장담할 수 있다. 만약 이걸 시도하는 사람이 있다면 절대 시도하지 말것!!!

2. Flutter

Flutter는 구글에서 개발한 크로스 플랫폼 프레임워크이다. React Native에 비해서는 확실한 후발주자이지만 요즘 시장에서 Flutter의 영향력이 조금씩 올라가고 있고, Flutter 출시 이후 구글에서도 매년 구글IO에서 Flutter를 비중있게 다루고 있어 이 시장에서 Flutter의 발전 가능성이 주목받는 상황이다.
하지만, 여기서 문제가 있다면 Flutter는 메인언어로 Dart를 사용하기 때문에 Flutter 학습 시 Dart에 대한 기본 개념이 선행되어야 한다.

2-1. 장점

1. 웬만한 UI는 자체 제공한다.

React Native에서는 오픈소스 라이브러리에 거의 전적으로 의존할 수 밖에 없는 구조인데, 반대로 Flutter는 많이 사용할 가능성이 높은 UI 기능들을 Flutter 팀에서 직접 개발해 공식적으로 유지보수를 해주고 있다. 따라서 Flutter의 공식 제공 UI들은 구글의 직접 관리를 받는다는 뜻이다.

2. UI 동작 성능이 뛰어나다.

React Native는 브릿지 모듈을 통해 운영체제와 직접 통신하는 방법이라고 이야기했다. 하지만 반대로, Flutter는 UI와 관련해서 운영체제와 직접 통신하지 않는다. Flutter는 Flutter 프레임워크에서 UI의 최소단위인 Widget과 애니메이션, 제스처 등을 포함하고 있고, 이런 UI들을 모두 C/C++로 작성한 Flutter 엔진에서 그리게 된다. 운영체제는 단순히 이 Flutter 엔진을 실행하는 역할만 맡는다.
즉, Flutter로 개발된 앱은 픽셀 하나하나의 UI를 모두 운영체제가 아닌 Flutter가 그리게 되는 원리이다. 이러한 점으로 인해 React Native에서 쉽게 그려낼 수 없는 UI들을 쉽게 그려낼 수 있으면서 두 운영체제 간 사이드이펙트가 적고 동작 성능이 월등히 뛰어나다.

3. 앱 자체 성능 또한 월등히 뛰어나다.

Flutter는 React Native와 달리 각 운영체제의 네이티브 코드로 컴파일 할 수 있기 때문에 빌드 성능에 있어서 React Native와는 비교가 안된다. 따라서 요즘 대기업들의 경우에도 Flutter를 눈여겨보고 있는 추세이며, 최근에는 구글페이 앱도 Flutter를 사용해서 전면 재개발했다고 하고, 새로운 구글페이 앱은 기존 앱 대비 코드 줄 수가 35% 가량 줄었다고 알려져있다.

4. 프레임워크와 사용 언어의 개발사가 같다.

Flutter를 포함해서 Flutter의 메인 언어인 Dart도 모두 구글의 제품이기 때문에, 두 팀이 상호 협력하면서 기능을 보완할 수 있다. 즉, Flutter 팀에서 어느 한 기능이 필요한데 Dart에서 이를 제공하지 않는다면 Dart 팀이 이를 바로 만들어 줄 수 있는 것이다. 다른 프레임워크에서는 프레임워크와 메인언어의 개발자가 서로 달랐기 때문에 언어와 VM이 서로 영향을 미치는데 한계가 있었지만, Flutter의 경우 Dart가 같은 구글에서 개발했기 때문에 즉각적인 상호 협력이 가능하다. 또한 Flutter는 초기에는 그러지 못했지만 빠른 앱 개발을 위해 AOT(Ahead of Time) 컴파일 방식 또한 채택할 수 있었다.

2-2. 단점

1. Dart에 대한 별도 선행학습이 필요하다.

React Native와 달리 Flutter는 메인언어로 Dart를 사용하기 때문에, Flutter 개발을 위해서는 Dart에 대한 기본 개념학습이 선행되어야 한다.

2. 진정한 네이티브 앱을 개발할 때와 동일한 제어 기능을 가질 수 없다.

이 부분은 크로스 플랫폼 프레임워크의 숙명이기 때문에, React Native에도 동일하게 존재하는 단점이다.

3. 다른 앱 대비 앱 크기가 무겁다.

그 이유는 Flutter는 Flutter가 직접 UI를 그리는 방식이고, 이 UI들을 실행하기 위한 그래픽 엔진 코드까지 함께 패키징해서 빌드해야 하기 때문이다.

4. 운영체제 순정 UI를 사용할 수 없다.

위에서부터 계속 이야기 하지만, Flutter는 운영체제와 직접 통신하지 않고 Flutter가 직접 UI를 그리는 방식이기 때문에 운영체제의 순정 UI 및 기능을 사용할 수 없다. 물론 Flutter 공식 문서를 확인하면 Material(구글의 디자인 시스템)과 Cupertino(애플의 디자인 시스템)를 사용할 수 있다고 나와있지만, 그 UI들은 진짜가 아니다. 최대한 비슷하게 만들어놓은 가짜에 불과하기 때문에 진짜 운영체제 순정 UI를 볼 때와 미세하게 느낌이 다를 수 있다.
따라서 구글과 애플의 디자인 시스템을 사용하지 않고 나만의 디자인 언어를 가지고 커스텀 UI를 가진 앱을 개발하고자 한다면, Flutter가 좋은 방법이 될 수 있다. 만약, 그 반대인 경우 React Native를 사용하는 것이 효율적일 수 있다.

3. 차이점 간단 정리

위에서 정리되지 않은 내용도 있음

3-1. React Native

1. 커뮤니티 크기가 압도적으로 크다.
2. 운영체제 별 순정 UI를 사용한 앱을 만들기 쉽다.
3. 프로젝트 버전을 업데이트하기 매우 어렵다.
4. CodePush를 사용해 앱을 원격으로 업데이트할 수 있다.
5. 범용적인 개발언어를 사용한다. => JS/TS

3-2. Flutter

1. 커뮤니티가 상대적으로 작다.(아직은)
2. 자체 디자인 언어를 가진 커스텀 UI를 사용한 앱을 만들기 쉽다.
3. 프로젝트 버전을 업데이트하기 쉽다. => 큰 사이드이펙트가 없는 것으로 알고 있음.
4. CodePush 사용이 불가능함(현재는 그런걸로 알고 있음)
5. 전용 개발 언어를 사용한다. => Dart

4. 마지막으로

이렇게 정리를 했지만, 그래서 React Native와 Flutter 둘 중 어느게 더 좋고 어느게 승리할 것인가라는 의문점이 들 수 있다. 그 답은, 나도 잘 모르겠다. React Native와 Flutter 둘 다 각자만의 장단점을 가지고 있고, 그 장단점들이 너무 명확하기 때문에 뭐가 더 좋다고 이야기하기가 애매하다. 하지만 내가 어떤 앱을 개발해야 하고, 어떤 기능들을 제공해야 하고, 어떤 UI를 적용할 것인지에 따라서 어떤 것을 사용할지가 갈릴 것이다.
그래서 나도 그 점들을 잘 알고 있기 때문에 만약 둘 중 하나만을 사용할 수 있는 사람이라면 다른 것들을 한번 시도해보는 것이 정말 가치있는 일이 아닐까?