React-Native의 장단점은? [펌]

React-Native의 장단점은? [펌]

 

 

React-Native 공부를 시작했습니다.

(RN의 한국어 자료가 많아지길 희망하며..)

저는 현재 iOS를 메인으로 하는 개발자(swift 좋아요 😍)이며, android도 프로젝트 개발을 진행 할 수는..😅 있습니다. 웹 프론트, 백엔드도 어느정도는 알고 있고.. 실무도 약간은.. 😅 했었죠.

이정도 베이스를 가지고.. RN 첫 공부하면서 생각한..

지극히 개인적으로 생각한 장단점을 적어보겠습니다.

---

장점

iOS, android를 동시에 개발하기가 쉽습니다.

만약, React-Native를 전혀 모르시는 분이라도 react(javascript)의 문법만 익혀서 개발하면 되기 때문에 부담이 덜 할 것입니다.

아주 간단한 어플, 에니메이션 보다 정보제공이 목적인 화면 구성이라면 생산성에서 큰 차이가 있을 것 같습니다.

당연히 러닝커브(Learning Curve)는 필요합니다.

하지만 iOS, android을 익히는 것 보다 생산성은 단연!!! 짱일 듯.. 👍

react 를 아시는 분이면 더욱 쉽게 개발 할 수 있습니다.

이렇게 쉽게? 대!박.. 하면서 개발하실 것입니다.

문법도 해보시면 간편함을 느낍니다. (네이티브와 비교해서 이지요)

.. react를 모르시더라도

문법에 해당하는 javascript를 잘하시면, react를 아시는 것만큼..

역시 진입장벽이 낮아지실 것 입니다.

핫 리로드(Hot Reload)👍와 라이브 리로드(Live Reload)를 아시나요?

그냥 완전 짱입니다. 👍 👍

수정하면 바로 반영 되는 것을 보면 감동 먹을 거에욧!!

오!!!!!!!!!!! 이것이 모든 단점을 잊게 만들 정도로 훌륭합니다.

소스를 수정해서 저장만 하시면!! 변경된 내용을 확인 하실 수 있습니다.!!

전체 소스나 해당 부분만 효율적으로 리로드 시켜서 바로바로 핸드폰이나 시뮬,에뮬레이터에서 수정된 부분을 확인하면서 개발이 가능합니다.

코드 푸쉬(code-push)를 아시나요?

이것은 앱을 심사 없이 수정이 가능하게 해주는 라이브러리? 모듈? 입니다.

Javascript단의 코드와 assets(이미지, 폰트 등) 의 요소들 심사 없이 업데이트 할 수 있습니다.

코드 푸시는 저도 좀 더 알아봐야되기 때문에 여기까지만 ..

좀 짱이에요. 👍

올린 App이 문제가 있을 경우!! 코드 푸시를 이용해서 Web처럼 심사없이 즉각 대응하여 변경 할 수 있다면..

고객에게 문제점 발생시 빠른 대응을 할 수 있다는 것은 정말 큰 장점이라 생각합니다.

나중에 코드 푸시도 공부하면 정리해서 올릴 생각입니다.

Microsoft/react-native-code-push

react-native-code-push - React Native module for CodePush

github.com

 

react로 되어있는 사이트를 모바일로 포팅하기 쉽습니다.

만약 플렉스 기반으로 스타일일을 해두었다면, 수월하게 모바일로 오픈 시킬 수 있을 것 입니다. css라면? 각오좀 해야된다고 하네요 ..😅

(물론, React을 알고, 수월하다 하더라도 RN으로 포팅하려면, 최소 1~2주는 잡아야 된다고 하는 것 같습니다.)

Redux 등 훌륭한 패턴 지원

개발을 위한 좋은 아키첵쳐 패턴도 지원하고 있습니다. 👍

• Redux (리덕스) 아키텍쳐 : FP(Funtional Programming)를 선호하시면 ..
• MobX (몹엑스) 아키텍쳐 : OOP(Object-oriented programming) 좋아시는 분이면..

(아마? RxJs도 가능할 것 입니다…)

아래 링크는 제가 Redux를 공부해보고 메모한 글입니다.

[RN] React Native, Redux 란? Reactive 부터..

Redux는 React Native 를 개발하는 데, 좋은 아키텍쳐 패턴으로 알려져 있죠.

medium.com

 

웹 확장에 유리합니다.

당연한 이야기 이지만, React로 넘어가기 수월합니다.

향후 웹도 계획하고 있다면 보다 유리하지 않을까 싶습니다.

그리고 복잡하지 않은 앱이라면 , react-native-web을 살펴보세요.

necolas/react-native-web

react-native-web - React Native for Web

github.com

 

SDK의 발빠른 대처

한국어 지원이 불편해서 인정하고 싶지는 않치만, 빠르게 버전 업데이트 하고, 1주일 간만 확인했지만, 깃헙, 커뮤니티 등 이슈에 계속해서 대응하는 모습이 나쁘지 않았습니다.

메뉴얼도 좋았습니다.

Getting Started · React Native

This page will help you install and build your first React Native app. If you already have React Native installed, you…

facebook.github.io

 

개발 툴이 필요없습니다.

CRNA(Create-React-Native-App)( Create-react-native-app)와 Expo가 있습니다. android studio, Xcode 가 필요 없이 개발이 가능합니다.

궁금하시죠? ~ 적으면 길어져서 간단한 아래 링크로 대신합니다.

궁금하시면 추가 검색을~

[RN] React-Native 시작하기

저는 Mac을 사용하고 있습니다. Mac 기준으로 작성하였습니다.

medium.com

 

showcase react native !!

믿을 만한 업체에서 개발하여 운영하고 있습니다.

React Native · A framework for building native apps using React

A framework for building native apps using React

A framework for building native apps using Reactfacebook.github.io

 

다양한 Debugging 지원

처음에는 플렛폼이라 디버깅이 어렵지 않을까 생각했지만!!

키보드 단축키, 콘솔 로그, Chrome Developer Tools, React Developer Tools 등 를 이용하여 다양한 디버깅을 할 수 있는 기능을 지원합니다.

Debugging · React Native

Enabling Keyboard Shortcuts

facebook.github.io

 

단점

유지보수가 힘듭니다.

문제가 생기면 원인을 찾기가 힘듭니다.

예를 들면 “앱 시작 로딩이 긴 현상의 원인은 뭐가있을까요?” .. 라는 증상이 발생했을 때, “네비게이터가 나오는 데 20초가 걸리는 지?”의 증상을 파악하고 문제점을 판단하기 위고 찾아내는 시간이 프레임워크이기 때문에 찾기 힘들수있습니다.

한국어로 된 개발자료가 부족한 것 같습니다.

영어 이외의 자료가 네이티브 개발에 비해 무척 턱없이 부족한 것 같습니다.

한국에서 초급 개발자의 입문(..증가)은 보다 힘들지 않을까요? 😅

외부 라이브러리가 상대적으로 부족한 것 같습니다.

모바일은 특별한 UI 요구사항들이 있는 데, 누군가가 비슷한 오픈된 라이브러리 를 만들어 올려놓은 자료들이 네이티브에 비하면 턱없이 부족해 보입니다.

계속 개발 버전이 빠르게 상승하고 변경중입니다.

개발 버전이 2주에 한번씩 변화된 버전을 내놓고 있습니다. (장점이기도 하지만..)

시간이 지나면 지금 개발중인 버전의 소스는 신규버전에 맞추어 다시 빌드 할 경우 ..

문제가 많이 생길 수 있고, 계속 소스의 업데이트도 필요 할 수 있습니다.

(라이브러리 들이 플렛폼에 연관성이 강해서 업데이트를 하면 어떻게 될지.. 후덜덜..)

현재 (2018–08–19) 버전은 0.56 입니다.

React Native 1.0 일때는 얼마나 많이 바뀌었을까요?

React Native · A framework for building native apps using React

A framework for building native apps using React

A framework for building native apps using Reactfacebook.github.io

 

국내 개발자가 너무 없습니다.

만약 제가 만들고 있다가 퇴사하게 된다면!! 후임자를 구하기가 참 어려울 것입니다. 영세할 수 록 더 힘들지 않을까요?

요즘은 react 개발자도 구하기 힘든 시기입니다. ~

한국에만 없는 것인지는 모르겠지만,

React-Native, 그 외 크로스 플랫폼 개발자는 국내에 적은 편으로 알고 있습니다.

만약!! 지금 잘 하고 계시는 개발자(엔지니어)가 떠나가면, 현재 운영중인 앱은 소스도 스파게티가 되어가며, 문제점이 많아지는 앱이 될 확률이 높습니다.

그런데 우리나라는 그런 엔지니어를 소중하게 대하는 곳이 많은 지.. 걱정이 됩니다.

복잡한 UI 구현하기가 힘듭니다.

실제 네이티브 코드를 작성해서 파워풀 한 개발을 할 수있게 지원할 수 있다는 부분은 있지만, 이렇게 수정이 되면… React Native에 네이트브 코드까지 섞인 매우 유지보수 하기 힘든 앱이 되겠지요. 어느정도까지 가능할 지도 지금 시점에서는 판단이 되지 않기도 하구요. RN 더불어 버전이 올라갔을 경우 대응이 더 힘들지 않을 까 싶습니다.

만약 RN으로 개발 시에는 기획자의 요구사항을 반영하기가 네이티브보다는 어려울 것 같습니다.

난이도가 높은 애니메이션 기능이 구현이 되지 않을 것 같습니다.

React-Native만으로는 네이티브에서도 구현하기 힘든 애니메이션이 구현이 가능할 것인지 아마 쉽게 개발되지 않거나 가능하지 않을 것 같습니다.

한계층 낮은 레벨의 에니메이션 기능까지는 활용이 안되겠지요. 기본 UI레벨의 에니메이션 처리까지만 지원 될 것 같습니다.

만약 필요하시면 Lottie를 검토해 보시는 것은 어떠세요?

RN이 아닌 일반적인 네이티브 개발에서도 Lottie를 사용하여 프로젝트를 진행합니다.

react-community/lottie-react-native

Lottie wrapper for React Native. Contribute to react-community/lottie-react-native development by creating an account…

github.com

 

노하우가 생길려면?

노하우가 생기기 전까지는 계속 괴로울 것 같은 부분이 많이 있습니다. 셋업해야되는 부분도 많고, 알아야되는 부분도 많고.. 하나의 OS만 알아야되는 것도 아닌것 같고… 이것이 크로스 플렛폼의 특징이겠지요.

노하우가 생기려면 오래 걸리겠지요?

신기술 속도 따라가는 것은 늦을 수밖에 없겠지요.

android 진영, iOS진영에서 새로운 기술, 새로운 OS를 도입하면, 해당 기능을 실제 우리 앱에 적용하는 시점은 네이티브보다 1~2 Step늦을 수 밖에 없습니다.

새로 적용된 기술은 버그도 있을 수 있고, 필요하다면 issue 등을 제기해서 반영요청을 하더라도.. 시간적 딜레이가 있을 수 밖에 없습니다.

플랫폼의 위험성

아무리 검증된 회사, 검증된 라이브러리 라고 할 지 라도, 언제 기술 지원이 끝날지 모르는 것 입니다. 언제까지 훌륭한 엔지니어들이 계속 지원하고 있을 지도 모릅니다. 개발은 새로운 기술, 새로운 서비스가 등장하면 급변하는 곳이니깐요. 네이티브를 브릿지로 래핑하고 있는 리엑트 네이티브도 언젠가 모를 위험성이 100% 없다고 말 못합니다.

개발자에게 1이 아니면 0이자나요.

새로운 버전 사용의 부담감

아래의 내용이 모든 상황은 절대 아닐 것입니다만.. 그래도..

다들 어떤 버전을 사용하시나요?- 0.55.4 사용합니다. 0.56 도전했다가 바벨 7.. 때문에.. xx하고- 0.53 사용합니다. 0.55.4 인가? 윈도우즈 10에서 핫로딩이 안되요..- 0.56.0 최근 버전은 실행도 안되구요. 물론 윈도우즈 10에서 rn은 ..

문제점의 개선이나 android, iOS의 새로운 기능이 반영되어서 새로운 버전이 올라갔지만..

새로운 버전을 올려서 다른 문제점이 생길 수도 있고..

더불어 이미 사용 중인 현재 버전에서 최신버전으로 변경하는 것은 쉽지 않습니다.

내부 라이브러리들간의 디펜던시들이 미묘하게 얽혀 있어서, 변경도 쉽지 않기도 하고, 고생해서 변경했다 하더라도 플랫폼의 수정이라 어떤 부분에서 문제가 있을 지 모르기 때문에 앱을 충분히 검증하고 올려야 됩니다. 충분한 시간이 필요한 일이지요..😭

Error가 발생하면

리엑트 네이티드 개발 소스에서만 문제가 생겼을 수 도 있지만, 플랫폼의 오류나 네이티브 지식이 필요할 경우도 간헐적으로 생길 수 있습니다.

네이티브 경험이 없다면… 대응할 때 많은 시행 착오와 시간을 허비할 수 있을 것 같습니다.

업무량이 많을 수 있습니다.

android, iOS 혹은 다수 플렛폼을 검증하면서 개발해야됩니다.

개발자 입장에서 무척 부담되는 부분일 수 있습니다. 계속해서 .. 님의 회사에 오래 근무하지 못하게 하는 요소 일 수 있습니다.

모든 개발자 들이 개발을 즐기고 사랑하지만은 않습니다.

이거 별거아니자나.. 어서 적용해줘.. 왜 못해? 그러지 말아주세요~ 😭

android 와 iOS는 UX/UI가 다른데..

어쩔수 없이 맞춰가야 되는 부분이 생기게 됩니다.

다양한 플렛폼들은 각자의 UX/UI가 있지만, 한쪽에 맞춰야 되는 부분이 생길 수 있습니다.

예를 들면, 이렇게 하려면 iOS검수 통과가 안될 것 같으니, android 도 iOS맞춰서 개발하자 … 이런 경우가 하나의 예시이고 여러가지 경우가 생길 수 있겠지요?

RN 플랫폼 만으로 개발이 완료되지만은 않을것…

모든 기능 구현이 플랫폼 만으로 되지 않을 수 있습니다.

둘다 혼용되는 모듈만 사용하면 상관없지만, 커스터마이징이나 몇몇은 각 네이티브 단을 건드려야 되는 상황이 있다고 알고 있습니다.

100% RN 플랫폼으로 개발이 완료 되지는 않을 것입니다.

Objectiv-C

React-Native 플랫폼 iOS 기반 소스는 Objective-c입니다.

iOS 브릿지 개발이 필요하거나, 플랫폼에 문제가 있는 것 같아서 Base 소스를 확인하려면, Objective-c 문법을 알아야 합니다.

swift는 2014년 6월 1.0 버전이 나오고, iOS 개발자 들이 빠르게 objc -> swift로 돌아서고 있습니다.

apple store에 swift로 개발되지 않은 앱은 100개중 10개 이하인 시대입니다.

점점 swift 개발자들은 늘어나고 있고, objective-c 는 사라지고 있는 언어입니다.

그만큼, 갈수록 objc 언어의 stackoverflow나 검색된 자료들이나 개발자들도 찾기 어려울 것입니다.

아래는 Stack Overflow Developer Survey 2018의 내용 중 화면 일부입니다.

중단점 (Break Point)

강력한 디버깅을 지원합니다.

Debugging · React Native

Enabling Keyboard Shortcuts

facebook.github.io

 

다만, 브레이크포인트를 걸고, 스텝 바이 스텝으로 로직을 파악해 보고 싶은 욕심이 있었는 데..

가능은 합니다.!!

JS Debugging 을 시작해서

• http://localhost:8081/debugger-ui/ 이 나타나고

이때 크롬 개발 도구를 이용해서 Sources에서 localhost:8081 을 하위 디렉토리를 풀어서 크롬 웹 디버깅을 하시면 됩니다.!

네이티브 만큼의 만족감이 떨어지네요. 😅

당연히 Native 레벨은 원래 사용하던 중단점이 가능합니다.

다만, 브릿지로 추가한 네이티브 기능을 검증할 때만 유용하겠죠.

Debugging native codeWhen working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.

추가로 생각해 볼 점.

느려지는 부분은 없을지..

초기에는 좋겠지만, 만약 복잡한 화면이나 비지니스 로직이 많아지면 느려지는 부분이 없을 지 의구심은 듭니다.

이건 구현하면서 확인 해야 될 것 같습니다. 아마 있지 않을까 싶습니다.

완벽할지?

정말 하나의 코드로 모든 android, iOS 가 완벽하게 똑같이 동작하거나 버그가 없을 지 의문입니다. 약간의 이상작동은 없지 않을까요?

다른 솔류션을 도입할 때는 어찌 될지 (서드파티 프레임워크 도입 제약)

만약 외부 솔루션 업체의 라이브러리를 도입했을 때, 리엑트 네이티브 일때는 적용의 제약이 클 것 같습니다.

에니메이션을 위해 Lottie라는 에어비엔비에서 만든 라이브러리를 도입하려면 아래와 같은 react 커뮤니티에서 제공된 라이브러리가 필요합니다.

react-community/lottie-react-native

lottie-react-native - Lottie wrapper for React Native.

github.com

 

Realm DB 를 사용하려면 아래 링크에서 가이드를 참고해서 사용하시면 됩니다.

Realm: Create reactive mobile apps in a fraction of the time

Realm JavaScript is the first database built for mobile. An alternative to SQLite and ORMs that's fast, easy to use…

realm.io

 

Lottie, Realm DB와는 달리..

유명하지 않은 일반적인 작은 업체의 솔루션은 도입하는 데 제약이 있지 않을까 싶습니다.

이렇게 제공하기도 쉽지 않을 테니, 직접? 무언가를 해야되거나 혹은 래핑해서 지원하는 라이브러리 있을지도 모르겠지만.. 사람이나 업체에서 … 언제까지 지원할까요?

이 부분들은 공부나 직접 프로젝트 개발을 더 해봐야 명확히 알 게 될 것 같습니다.

난독화

android studio에서 proguard가 동작은 하는 데..

정확히 어디까지 어떻게 되는 지.. 모르겠습니다.

난독화 솔류션을 도입했을 때도 어떻게 될지..

현업의 모바일 개발자와 웹 개발자

제가 개인적으로 느끼기 에는 React-Native는 …

모바일 개발자보다 웹 개발경험이 많은 개발자 분들이 진입하기가 좀 더 수월한 것(친숙한 것)같은 느낌을 받았습니다.

미묘합니다. 😅 이런 느낌이 모바일 개발자가 RN으로 잘.. 넘어가지 않는 이유는 아닐지… 생각해 봤습니다.

---

RN에 입문한지 얼마 되지 않아서.. 틀린 부분이 있을 수 있습니다.

(너그럽게 생각해주세요~)

이것 저것 생각나는 부분을 여과없이 적어보았네요.

공부하면서 틀린 부분이 확인되면 바로바로 수정해 두겠습니다.~

읽어주셔서 감사합니다.

즐거운 하루 되세요 :) 🙇‍

 

 

출처 : https://medium.com/@jang.wangsu/rn-react-native%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90%EC%9D%80-6e8a2396eea1