React Native VS Flutter 비교

네이티브대신 크로스플랫폼을 배우게 된 계기

앱개발을 하고싶은데 네이티브보다 크로스 플랫폼이 더 끌렸어요.

개인적으로 1인개발은 여러가지 다 꼽아봤을때

본인이 IOS,android 둘다 지원을 할 계획이라면 크로스플랫폼이 유리하다고 생각이 들었습니다.

제가 크로스 플랫폼으로 앱개발을 배운다고 결정을했을때 저한테는 두가지 선택지가 있었습니다.

 

React Native vs Flutter

내가 이 둘을 정말 고민을 많이많이 엄청많이 해봤어요. 근데 진짜 잘 모르겠어서 그냥 둘 다 해봤습니다. 

리액트 네이티브

리액트 네이티브를 처음 배웠을때 굉장히 쉽게 제 아이패드와 아이폰에 앱을 띄울수있었습니다.

Expo를 사용했는데 처음 앱을 띄우고 여러가지 배울때는 "오 굉장히 재밌어보인다"였습니다.

하지만 저는 몇번 하다보니까 단점들이 보였고 안그래도 그 당시 코로나걸려서 컨디션이 안좋았는데

버그 하나 날때마다 분노가 차올랐습니다. 그 단점들을 나열해보겠습니다.

단점 1. 스타일

css를 할줄아는 저는 금방 배울수있었습니다. 근데 너무 불편해요 진짜로 

css같은데 css랑 좀 다르구요 그리고 이게 안드로이드랑 IOS랑 스타일 값을

따로따로 지정을 해야할때가 있어요 

https://stackoverflow.com/questions/62533701/react-native-app-has-different-style-in-ios-and-android

react native app has different style in ios and android

왜냐면 이게 안드로이드랑 IOS랑 네이티브 코드로 버튼을 만든다고하면 둘이 똑같이 생겼나요?

다르게 생겼습니다. 때문에 한쪽에서 디자인을 하고 나머지 한쪽을 또 테스트해야할수도있어요

이게 리엑트 네이티브가 JS코드를 Native로 변경하면서 작동을해서 그렇습니다..

이거 해결하려면 리액트 네이티브 좀 이쁘장하게 만들어주는 라이브러리를 써야합니다.

이쁜거 많아요 근데 그게 또 쉬운게 아니에요 1인개발이라고 하면 본인이 머릿속으로 그려놓은 UI나

프로토타입을 좀 변경해야하는 타협을해야하고 아니면 디자이너가 있고 본인이 그걸 코드로써 완성을 해야한다면

아예 사용을 못하거나 귀찮게 좀 수정을 해야합니다

단점 2. 라이브러리 설치 후 버그 와르르

뭐 설치만 하면 버그가 와르르나요 노마드코더님도 플러터랑 리액트네이티브 비교하면서 플러터로 구현할수있는 "이것"을 리엑트 네이티브로 하려면 라이브러리를 설치할거같은데 아마 설치해도 버그가 와르르나서 버그잡는데 시간을 쏟을거라고 하셨습니다.

(노마드코더 리액트 네이티브,플러터 비교영상)

이거 정말 스트레스였는데 솔직히 말씀을 드리면 제가 리엑트 네이티브랑 플러터 배울때

코로나 걸린상태라 되게 예민하고 화도 많은 상태긴 했습니다. 근데 아마 지금 해도 화날거같아요

 

 

장점 1. 코드푸쉬

장점은 정말 강력합니다. 바로바로 코드푸쉬입니다. 유저가 업데이트를하지않고 핸드폰에 다이렉트로 업데이트를 시킬수있습니다.

이거때문에 리엑트 네이티브를 선택하신다고하면 저는 할말이없습니다.  플러터는 이게 공식적으로 지원하지않습니다.

 

장점 2. 리액트 문법을쓴다.

이것도 장점이죠 리액트 개발자가 리액트 네이티브로 앱을 개발할수 있다는거 정말 좋습니다.

만약에 본인이 리액트 웹개발자고 1인개발로 쇼핑몰이나 어떤걸 판매하는 사이트를 운영중이다? 리액트 네이티브로 앱을 출시하세요.

웹보다 앱이 구매확률을 확 늘려줍니다.

 

그리고 개인적으로 리액트의 코드작성 방식은 정말 맘에듭니다.

 

---

플러터

전 리액트가 좋았습니다. 근데 이젠 플러터가 더 좋습니다. 

일단 제가 현재 플러터를 좋아하니가 장점을 나열해보겠습니다.

 

1. 빠르게 만들기 좋다.(개인적)

2. 코드를 짜는게아니라 조립하듯이 개발할수있다.(개인적)

3. 개발하면서 라이브러리 설치로 버그난적 단 한번도 없었음 (개인적인거긴한데 이건 대부분 다 비슷비슷한얘기를합니다)

4. 구글이 밀어주는중이다. Firebase나 google Admob등 싹다 구글꺼라 연동이 쉽다.(공식지원됨 실제로 Firebase연동할때 코드 딱 한줄썼음)

5. 웹,앱,데스크탑 애플리케이션(윈도우,맥 둘다) 지원 (공식)

6. 게임도 만든다는데 안해보긴했습니다. 

7. Js할줄아는사람이면 Dart(플러터개발할때 쓰는언어) 금방 배운다.(이건 개인적인거라고 하기 뭐한게 실제로 비슷하게생겼어요)

 

하지만 저는 플러터도 배우기싫었는데요 이유를 한번 알아보겠습니다.

플러터의 단점들

1. 정말로 말도안되는 문법

이게 플러터 코드 아무거나 사진 찍어온건데요 혹시 플러터 한번도 안해보신분 이거 보고 무슨 생각이 드시나요?

전 진짜 머릿속에 "이게 뭐지?" 투성이었습니다. 뭘 호출을하는데 거기 안에다가 또 뭘 호출을하고 거기안에다가 또 호출을하고

진짜 이게 뭐지 싶었습니다. 웹개발을했던 저에겐 콜백함수처럼 딱 한번 집어넣는건 익숙했습니다.

const fn = (callback) => {
	//어떤 작업을함
    callback()
}

fn(() => {
 console.log("콜백함수 넣어드렸습니다")
})k

 근데 저거랑은 비교가 안되죠 웹개발만했던 그야말로 뇌정지가 왔던 기억이있습니다.

 

지금은 코드를 짜는게아니라 조립하는 느낌이라 리액트보다 편하긴하지만 저거 익숙해지는데 좀 걸렸어요 

 

 

2. 코드가 너무 보기 힘들다

저게 생긴것만 무서운게아니라 심지어 또 길어서 왔다갔다 해야하고 "내가 그 함수를 어디다가 짜고 어디서 호출했더라" 하는경우가 많았습니다.이게 3일차때 엄청 많이 느꼇어요 유지보수가 빡세다!

근데 이건 디자인패턴배우면 약간이나마 해결되는거긴합니다.

 

3. 똥폰에서 렉이 엄청걸린다. 

flutter로 짠 코드를 Skia가 그려줍니다. 그래서 어느 플랫폼에서든지 똑같이 보이는데 Skia 엔진자체를

돌리기 힘든 디바이스면 렉이 엄청걸립니다. A31이 집에 있어서 해봤는데 앱이 좀 커지니 굉장히 렉이 많이걸렸습니다.

하지만 Iphone 13 mini에선 정말 부드러웠어요

 

4. 앱이 무거움

기본적으로 앱이 좀 무겁습니다. 근데 솔직히 저는 요즘 폰 스펙이 좋아서 그렇게 문제인가 싶습니다.

5. 코드푸쉬

이거 지금 엄청 느끼고있습니다. IOS,Android 테스트 후 잘 작동하는걸 확인을하고 앱을 출시를했는데

안드로이드에서 앱 설치만되고 실행시키면 앱이 종료되고있는데 이런 문제가 발생할 시

즉각적으로 해결을 하지 못한다는 단점이 있습니다. 버그해결하면 업데이트 승인때까지 기다려야해요

 

---

그래서 뭐가 좋아요?

저는 플러터를 택했습니다. 후회는 없지만 그래도 리액트 네이티브보다 좋다! 라고 말한순 없습니다.

리액트 네이티브도 꾸준히 발전중이고 속도로 플러터한테 밀렸었다 그러는데 hermes인가 뭔가 도입하고 Flutter랑 비슷해졌다고 하네요

네이버는 지식인을 플러터로 만들었습니다. 하지만 토스는 플러터랑 RN 고민하다가 리액트 네이티브 쓰고 정말 좋았다. 이런 유튜브 영상이 있습니다. 그니까 막 둘중에 뭐가 딱 잘라서 더 좋다 라고 말을 할순없습니다. 솔직히 둘다 좋아요 

플러터가 급성장을 한것도 사실이고

리액트 네이티브가 과거부터 지금까지 플러터보다 모범사례가 많은것도 팩트기에 

본인이 대표라면 개발자들이 리액트 개발자인지 아닌지랑

1인개발자라면 리액트를 본인이 할줄 아는지 본인이 생각하는 플러터의 전망 이러한 것들을 고려하고 결정을 내리셨음 합니다.

 

 

그래서 만든앱이 뭔데

비트코인 모의투자 앱을 제작하였습니다.

안드로이드는 승인 4일 걸렸고 거절은 없었습니다.

앱스토어는 하루만에 거절 후 다시 요청하니 놀랍게도 8시간만에 승인해줬습니다. 심사해주신 모투에서 닉네임 liloli쓰시는 직원분에게 

감사의 말씀을 드립니다. 이거 플러터 배우고 처음 출시하는 앱이고 제작은 2주 걸린거같은데 중간에 해야할게 많아서 

순수 시간은 한 6~7일 정도일거같네요 

 

코인 투자에 관심있으시다면 한번씩 이용 부탁드립니다.