React Native에서 Flutter로 넘어간 이유

처음 React Native를 선택했던 이유

 

이미 JavaScript와 React를 쓰고 있었고, Flutter를 쓰려면 Dart를 따로 더 공부해야한다는 러닝커브 때문에 자연스럽게 React Native를 선택했다.

 

왜 React Native를 떠났나?

1. 빌드 방식 차이

react native로 개발을 하다가보면 하루 종일 빌드 이슈만 해결하다가 개발은 손도 대지 못하는 날들이 있었다. RN으로 개발을 하다가 마주하는 고질적인 문제점을 나는 아래처럼 순환이 된다고 생각했다.

유독 android에서 알 수 없는 버그 -> build 방식(bridge) -> UI 차이 -> 유독 android에서 알 수 없는 버그 -> ...(반복)

https://www.cuelogic.com/blog/flutter-vs-react-native-a-comparison-based-on-criteria

 

위 이미지를 보면 react native는 중간에 bridge가 껴있는 모습을 볼 수 있다. 저 bridge가 RN에서 JavaScript 코드와 네이티브 플랫폼 사이의 중계를 담당하는 친구인데, JS 코드를 bridge가 해석하고 네이티브 방식으로 변환하고 사용자가 터치 등의 입력을 주면 네이티브 이벤트를 다시 JS로 전달하는 등의 역할을 담당한다. 이 과정에서 발생하는 현상들을 나열해보면 다음과 같다.

1. JS ↔️ bridge ↔️ Native로 변환: 성능 저하, 복잡도 증가

2. UI 차이 발생: ios/android 네이티브로 각각 변환하기 때문에 각 플랫폼이 지원하는 형태로 변환한다.

3. OS 별 버그: 다양한 OS 버전으로 bridge가 변환을 해주는데, 디버깅이 어려운 이유가 이 변환 과정이 복잡하기 때문이다.

4. 3번을 해결하기 위해서 네이티브 코드 수정

5. 1번 반복

 

이에 반해 Flutter의 경우 자체 렌더링 엔진인 Skia를 기반으로 움직이는데, 네이티브 컴포넌트를 사용하지 않고 직접 UI를 그린다. 그래서 각 ios/android 플랫폼 의존성이 낮고, UI도 같게 나오고, 디버깅 하기도 용이하다.

 

2. 시장 점유율

그 다음 이유는 시장 점유율이다. 아래 차트에서 파란색이 Flutter이고, 빨간색이 RN이다. 검색 빈도를 보면 파란색인 Flutter가 높다는 것을 알 수 있다. 검색이 많다 ➡️ 사용자 수가 많다 ➡️ 레퍼런스가 많다는 흐름으로 생각할 수 있는데, 이것은 내가 참조할 수 있는 자료가 많다는 것을 뜻할 수 있다.

Google Trends(2020-2025)

 

3. 업데이트 중단

사실 이게 Flutter로 갈아타는데 가장 결정적인 요소가 되었다. 

2025년 02월을 기준으로 react native의 가장 최신 버전은 0.77이고, Flutter는 3.27이다.

RN의 경우 아직도 1.0 버전이 나오지 않았다는 점, RN을 만든 Meta(Facebook) 측에서 이미 2021년 3월부로 Facebook SDK for RN에 대한 공식적인 지원이 끝났다는 소식이 있었기 때문에 앞으로 프로젝트를 이어가는 데에 있어서 안정성을 보장받지 못할 것이라고 생각했다. 물론 RN 자체에 대한 지원은 계속된다고 언급되어 있지만, RN 생태계가 적극적으로 업데이트될 것이라는 것을 기대하긴 어렵다고 생각한다. 버그를 수정하는데 레퍼런스도 적은데 이 요소들이 앞으로 개선될 가능성이 낮다면 더 이상 RN 생태계에 머물 필요가 없다고 생각했다.

https://github.com/facebookarchive/react-native-fbsdk

 

 

Flutter는 완벽한가?

1. 번들 크기 차이

Flutter는 자체 렌더링 엔진을 가지고 있기 때문에 기본 앱 크기가 크다.

RN은 기본 앱이 7MB 정도인 것에 반해 Flutter는 기본 앱이 15MB이다.

 

2. Native API

카메라나 생체인증처럼 Native API에 접근해야하는 경우 RN은 JS bridge를 통해서 라이브러리 하나만 사용해서 네이티브 기능에 접근할 수 있는 반면 flutter는 ios/android 각각의 네이티브 코드를 작성해야한다. 직접 네이티브 기능을 컨트롤 할 수 있다는 장점과 러닝커브가 높다는 구현 시간이 더 걸린다는 점이 공존한다.

 

3. Dart 학습 필요

RN의 경우 JS를 쓰기 때문에 기존에 웹이나 Node.js를 개발해왔으면 언어를 따로 학습하지 않아도 된다. 하지만 Flutter를 사용하기 위해서는 Dart라는 언어를 따로 학습해야한다.

 

React Native에서 Flutter로 넘어간 이유

 

하지만 이 점들은 서비스를 개발함에 있어서 안정성을 보장받고 일관된 UI/UX를 제공할 수 있다면 충분히 감수할 수 있는 요소들이라고 생각한다. 이런 상황에서 나는 굳이 리액트 네이티브를 고집할 필요가 없다고 느껴서 플러터로 넘어왔다.