React Native로 앱 개발 부터 배포까지

이전 포스팅에서 React Native를 한번 사용해보겠다고 한지 벌써 1년이 지났습니다. 잠깐 튜토리얼 정도 수준으로 앱을 만들어보다 생업 하기 바빠서 작업을 멈추었었는데요, 그럴 기회가 있을 거란 생각은 하지 않았는데 어쩌다 보니 React Native로 앱을 개발하고 있습니다.

 

이번에 새로 배포한 앱 '독구'를 개발하면서 어떤 경험을 했는지 RN이 얼마나 배우거나 개발하기 편했고, 하면서 다른 프레임웍과 비교해 어려운 부분이 없었는지 소상히 설명해보도록 하겠습니다.

 

독구 주요 화면 이미지

간단히 설명을 드리면 월 또는 연단위로 구독하는 서비스를 모아서 월평균 지출 비용을 관리할 수 있는 앱입니다.

 

다운로드 링크

안드로이드: https://play.google.com/store/apps/details?id=com.alt.doggu

독구 : 구독료 계산기 - Google Play 앱

iOS: https://apps.apple.com/kr/app/%EB%8F%85%EA%B5%AC-%EA%B5%AC%EB%8F%85%EB%A3%8C-%EA%B3%84%EC%82%B0%EA%B8%B0/id1488865593

‎독구: 구독료 계산기

기능이 그렇게 복잡하지는 않았기 때문에 (특히 네이티브 기능을 연동하는 부분이) 많은 부분을 설명하기보다는 웬만한 앱에서 기본적으로 쓰이는 부분에 대한 이야기나 뷰 구현에 대한 내용입니다. 우선 사용한 라이브러리는 다음과 같습니다.

• react-navigation: 화면 간 내비게이션을 위한 라이브러리

  • React-native-gesture-handler: 네비게이션할 때 애니메이션 적용

• mobx: 상태 관리

• react-native-collapsible: 뷰를 접었다 폈다 하는 컴포넌트

• react-native-easy-toast: iOS/Android 모두 사용 가능한 토스트 메시지

• react-native-elements: 여러 가지 기본 UI를 제공하는 라이브러리. SearchBar UI 만 사용

• react-native-picker: 커스텀 Picker 뷰 구성을 위한 라이브러리

• react-native-tab-view: 탭 뷰 라이브러리

• react-native-vector-icons: 오픈소스 벡터 아이콘 사용

• react-number-format: 숫자 포매팅 (콤마나 통화) 라이브러리

• @react-native-firebase: app, auth, firestore를 사용했고, 클라우드에서 데이터를 관리하기 위해 사용

기능이 복잡하지 않다고 했는데 은근히 사용한 라이브러리가 많네요. 대부분 UI를 간단히 만들기 위해 기존에 만들어진 모듈을 갖다 쓰느라 사용한 것들이 많습니다.

개발하면서 느낀 특이사항

저는 react-native 0.61.4 버전을 사용했고, v0.60.x부터 네이티브 모듈이 설치될 때 autolinking 된다고 하는데 기존에 react-native link 를 해주어야 했던 부분이 더 이상 필요가 없어졌는데 대신 네이티브 모듈을 설치한 후 cd ios && pod install && cd .. 를 해주어야 했습니다. (더 나아진 거 맞나?) 왠지 찾아보았는데 같은 질문을 한 stackoverflow 질문이 있었지만 아직 답은 없습니다.

 

v.0.59.x 이전에서 개발할 때 새로운 모듈을 설치하면 항상 실행 중인 앱이 죽어서 react-native start 를 다시 해주던지 앱을 껐다가 rm -rf node_modules && npm install 을 다시 해주던지 문제가 많았는데 그 부분이 고쳐진 것 같습니다. 이제 매끄럽게 개발을 할 수 있다는 점 => 생산성에 큰 이점이었습니다.

 

솔직히 React.js나 RN에 경험이 있으신 분들은 모두 공감하겠지만 이 두 가지는 재사용이나 컴포넌트 관리 측면에서 굉장히 강력합니다. 그리고 mobx를 사용하면서 데이터 상태를 한 곳에 관리하니 마치 모든 스크린을 한 곳에서 개발하면서 그때그때 원하는 부분만 볼 수 있는 듯한 느낌을 받았습니다.

 

redux도 많이 사용하지만 mobx는 어렵지 않고 필요한 기능도 다 있으니 궁금하신 분들은 여기 링크를 참조해보시기 바랍니다.

http://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html

 

데이터 상태 관리와 관련해서, 리액트의 장점 중 하나가 데이터가 변하는 뷰만 국지적으로 업데이트할 수 있다는 점인데요. 이 특이한 점 덕분에 조금 더 섬세하게 이해해야 하는 부분이 있습니다.

제가 이 부분이 헷갈려 잠깐 어려움을 겪었던 부분입니다. FlatList 안은 하나의 값이 바뀔 때 FlatList 전체가 업데이트되면서 스크롤이 상단으로 올라가는 일이 있었는데, 제가 리스트 안의 각 데이터를 관리하는 뷰를 독립적인 컴포넌트로 분리시키지 않았기 때문에 발생하는 문제였습니다. 그래서 뷰를 분리시키지 않으면 국지적인 업데이트가 아니라 전체 업데이트가 된다는 것을 깨달았습니다.

네이티브 코드를 사용했는가

사용하지 않았습니다. 라이브러리를 설치할 때 가끔 네이티브 모듈을 건드려야 하는 부분이 있긴 했지만 대부분 문서화가 잘 되어 있어서 쓰여 있는 대로 따라 하면 됩니다.

RN이 가지는 제약사항

결국 완전한 네이티브의 기능을 모두 적용하는 것은 어렵습니다. 사실 기능이 많이 않은 앱을 개발하면서 무슨 문제가 있겠어했는데 문제가 있었습니다. 아이폰 사용자들은 앱을 사용하다 아래서 위로 올라오는 모달 창이 뜨면 자연스럽게 제스처를 이용해 내려서 끄는데 현재 react-navigation 모듈에서 제공하는 방식은 스크린의 아주 상단에만 제스처가 먹혀서 보통 손이 위치한 자리에서 모달을 끌 수가 없습니다. 이 부분은 ios 13 버전이 나오면서 생긴 기능이라 아직 RN 모듈에 적용되지 않았는데 현재까지도 적용된 라이브러리가 없습니다.

이 말은 제가 사용하지 않은 영역에서 여러 제약사항이 존재할 것이라는 것을 암시하는 데요. 네이티브 기능이 가능하다고 해서 RN도 될 거라고 확신을 하지 않아야 할 것 같습니다.

마지막으로

Ionic과 가장 큰 차이가 성능으로 꼽히고 있는데 이번에는 성능에 대해서는 얘기를 할 수 없는 게 성능에 큰 부하를 줄 요소가 없어서 다른 코멘트를 하기가 어려울 것 같습니다.

 

그 외 ios 13 버전에서 발생하는 기타 이슈들이 있었는데 (@react-native-firebase도 연동하는데 조금 애를 먹었습니다) 앞으로도 RN은 업데이트할 일들이 많이 남았고 모든 프레임워크가 그렇지만 기존 라이브러리와의 호환 이슈가 생기는 것 같습니다.

 

이런 부분들이 크리티컬 한 이슈가 되기도 하고, 업데이트될 때마다 불안하긴 하지만 개발 속도나 코드 관리 재사용 관점에서 뛰어난 프레임워크라는 생각이 듭니다.