리액트네이티브가 아닌, 플러터를 선택한 이유

 

 

기존에 React Native(이하 RN)을 사용하던 나는 Flutter로 작업을 시작한지 어연 1년이 되어간다.

 Flutter를 선택하게 된 계기는 이직을 하게 되면서 운이 좋게도 회사 측에서 RN과 Flutter 중에 선택할 수 있는 기회를 주었고,

당시 Flutter는 새롭게 뜨는 언어로 주목받고 있었으며 RN을 이용해서 작업하며 많은 한계점을 느꼈기 때문이다.

 

 이제부터 RN과 Flutter를 둘 다 사용해보며 느꼈던 장단점을 각각 서술해보겠다.

---

1. React Native

RN은 React를 이용해서 모바일 개발을 할 수 있는 프레임워크로 Facebook에서 개발했다. 크로스플랫폼인만큼 iOS와 Android을 모두 개발 할 수 있는 언어로 플러터와 함께 떠오르는 선두주자 중 하나이다.

 

⭕ 장점

1️⃣ 낮은 언어장벽

• React Native라는 이름 답게 언어는 React, 즉 Javascript를 사용한다. 기존에 React를 사용하던 사람도 충분히 모바일 개발에 참여할 수 있는 이점이 있기 때문에 익숙하게 접근할 수 있다. 나 또한 React 공부만 했는데도 RN을 굉장히 쉽게 익혔던 기억이 있다. 즉, React를 할 줄 안다면 웹 개발자도 학습 시간에 많은 투자를 하지 않아도 앱 개발을 할 수 있다!

 

2️⃣ 다양한 써드파티 라이브러리

• RN은 매우 큰 커뮤니티장을 가지고 있는 덕분에 다양한 라이브러리를 가지고 있다. 네이티브로 접근해야하는 어려운 기능이나 독특한 UI 같은 경우에도 라이브러리를 통해 손쉽게 만들 수 있어 가장 큰 장점 중 하나라고 생각한다.'

 

3️⃣ Hot Reload

• React를 하면 절대 빼놓을 수 없는 핫 리로드. RN에서도 고스란히 적용되어 매번 새로고침 할 필요 없이 내가 변경한 부분(컴포넌트)만 쏙 바꾸어 화면을 새로 그려준다. 이는 개발하는 데에 있어 매우 편리함을 제공한다.

 

❗ 단점

1️⃣ 지나친 라이브러리 의존도

• RN을 선택하지 않은 가장 큰 이유 중 하나인데, 단순히 화면을 이동하기 위한 Router 사용 또한 라이브러리를 이용해야하는데 이 라이브러리도 정말 다양하다. 또한 BottomNavigationBar와 같은 기본 기능 또한 라이브러리를 설치해서 사용해야기 때문에 제공하지 않는 기능이 많다는 것을 깨달았다. RN 커뮤니티에서 라이브러리가 많아질 수 밖에 없는 이유이다.

 

2️⃣ React를 모른다면?

• 만약 처음 개발을 시작하는 초보자라면 React라는 언어에 대해 어려움을 느낄 수 있다. JSX와 동일한 구조를 갖고 있기 때문에 단순히 Javascript만 알아서는 안 되고, html/css 까지 모두 쓸 줄 알아야 한다는 것이 초보자에게는 매우 큰 장벽으로 다가갈 것이다.

 

2. Flutter

Flutter는 Dart를 이용해서 모바일 개발을 할 수 있는 프레임워크로 Google에서 개발했다. RN과 마찬가지로 크로스플랫폼으로 iOS와 Android를 모두 개발할 수 있으며, 특이하게도 웹이나 IoT 기기 등 다양한 플랫폼도 개발할 수 있다.

 

⭕ 장점

1️⃣ 구글의 전폭적인 지원

• Flutter는 구글에서 지속적인 개발과 지원으로 공식문서가 굉장히 잘 정리 되어있고, 발전 가능성이 높다. 또한 Material UI를 사용하기 때문에 Android와 iOS 화면을 동일하게 그리기 쉽고 커스텀하기에도 매우 용이하다. 

 

2️⃣ 네이티브에 근접한 성능

• RN은 Javascript 코드를 네이티브로 바꿔주는 Bridge를 통해 컴파일 하기 때문에 상대적으로 느릴 수 밖에 없다. 하지만 Flutter는 Skia engine을 사용해서 Android와 iOS 네이티브를 거치지 않고 바로 화면을 그릴 수 있기 때문에 크로스플랫폼 치고는 성능이 상당 부분 개선됐다.

 

3️⃣ Hot Reload

• 공식 홈페이지에서조차 Flutter는 React에서 영감을 받아 만들었다고 기재되어있을 정도로 유사한 점이 많다. 그 중 하나가 바로 핫 리로드다. 위에서 설명한 대로 핫 리로드는 main.dart는 그대로 두고 내가 변경한 부분(위젯)만 바꾸어 화면을 새로 그려준다.

 

❗ 단점

1️⃣ Dart라는 언어

• Dart는 2011년 Javascript를 대체하기 위해 구글에서 개발한 언어지만 당시에는 큰 인기를 얻지 못했다. 이후 Flutter를 출시하면서부터 'Flutter' 때문에 관심을 받기 시작한 언어로 C나 Java와 유사한 언어다. 높은 학습 난이도 때문에 처음 시작할 때에는 어려울 수 있다. 하지만 반대로 C나 Java를 할 줄 안다면 큰 문제점이 되지 않을 수 있다.

 

2️⃣ 작은 커뮤니티

• Flutter는 2.0 버전에서 Null Safety가 적용되면서부터 본격적인 인기를 끌기 시작했다. 즉 아직은 Flutter 사용자가 많지 않고 그만큼 스택오버플로우나 깃허브와 같은 공간에서 Flutter에 대해 논의할 사람도 적고 커뮤니티도 작다. 공식문서에 가장 많이 의존할 수 밖에 없다.

---

 이렇게 간단하게 React Native와 Flutter에 대해 비교해보았다.

 

 React Native와 Flutter 모두를 사용해본 내가 Flutter를 선택한 가장 큰 이유는 바로 써드파티 라이브러리 의존도 때문이었다. 실제로 RN으로 프로젝트를 작업하면서 라우터와 같은 기본 기능 조차 라이브러리를 사용해야함에 많은 한계를 느꼈다. 또, 과도한 라이브러리를 사용으로 각각의 의존성이 깨지며 발생한 빌드에러는 지금까지 악몽으로 남아있다.

 

 지금까지 약 1년 반 정도의 기간동안 Flutter를 작업하며 느꼈던 장점으로는 구글의 공식적인 지원으로 없는 기능이 없다! 였다. 필요한 UI는 모두 Material UI에서 가져와 쓰면 그만이기 때문에 내가 디자인한 것 그대로 조금씩 커스텀 하기만 하면 돼서 정말 편리했다. 물론, Javascript와 styled-component, JSX 등에 너무 익숙해진 나머지 객체지향적인 사고를 하지 못 하고 (이건 지금도 여전하다.) 단순히 화면을 그리는 것조차 상당히 애먹는 둥의 시행착오는 겪었다. 하지만 지금은 Flutter를 선택해 개발을 진행하는 데에 있어 후회가 없고 앞으로 더 공부 해볼 생각으로 블로그를 시작해본다.