리액트 네이티브 (React Native) 일년
Radish는 리액트를 매우 적극적으로 사용하고 있는 팀이다. 리액트 네이티브의 경우 현재 에어비앤비를 필두로 해외 많은 회사들이 사용하고 있고, 국내에도 도입한다는 회사들이 보이지만 실제 얼마나 서비스하고 있는지는 잘 모르겠다. 어찌됐든 빠른 기간 내에 관심을 모은 것은 확실하다.
여하튼 우리는 올해 2월에 iOS에 리액트 네이티브 앱을 런칭 한 후 안드로이드에도 런칭, 이후 계속 사용해오고 있다. 아직 부족한 점이 많지만 1년여간 실제 서비스에 도입하여 사용하며 느낀 점을 정리해볼까 한다.
왜 사용하게 되었나?
얼마전 play.node에서 Node.js로 대규모 글로벌 서비스 하기를 주제로 발표하신 flitto의 개발자 분이 왜 Node.js 를 선택하셨냐는 질문에 처음엔 “그냥 써 볼까?” 였다가 나중에 추가한 이유로
- 백엔드 / 프론트엔드를 같이 해야 하는 상황
- 2012년 당시 힙해보여서
라는 이유를 꼽으셨는데 우리의 경우는
- 짧은 개발 기간 (맨땅에서 시작해 3개월 남짓)
- 모바일 뿐만 아니라 작가를 위한 웹도 필요함
- 당시 팀에는 웹 UI 개발자만 있었으며
- 먼저 출시하기로 한 iOS 앱을 빠르게 혼자 만들더라도 높은 확률로 안드로이드 앱도 (iOS를 운영하면서) 혼자 만들어야 함 …당시 안드로이드 지원 전이었지만. (0.10.x 버전에서 시작, 현재 0.38.x)
- 2015년 React Europe conf 당시 데모로 출시됐었던 앱이 기대보다 괜찮았음
- 힙해보여서(…)
같은 이유로 리액트 네이티브를 선택하게 됐다. 하지만 선택하면서도 언젠가 팀에 여유가 생기면 네이티브로 가야지 생각했는데 1년을 사용해본 결과 아직은 그 결정을 보류하고 있는 상태. 이유에 대해서는 아래 정리한 내용이 도움이 될 것 같다.
어려웠던 부분들
잦은 버전 업데이트
활발하게 개발되고 있는, 즉 ‘힙한’ 기술을 사용하며 겪는 딜레마는 거의 비슷할 것 같다. 빠르게 변화하는 기술을 따라가면서 개발하기. 리액트 네이티브도 거의 2주에 한번 꼴로 빠르게 버전업이 되어 왔는데 그 중 우리는 지금까지 서너번 정도 업그레이드를 진행했던 것 같다. 업그레이드를 선택하는 시점은 크게
- 업데이트 된 프레임웤의 기능 및 개선 사항을 반영하고 싶을 때
- 프레임웤에 의존적인 다른 라이브러리의 업데이트를 위해 필요할 때
일텐데 2번의 경우에는 반대로 사용중인 다른 라이브러리가 업데이트된 프레임웤을 지원하지 않는 경우가 왕왕 발생한다. 대부분 큰 문제는 없었는데 0.25.x 버전부터 React, React Native 프로젝트가 분리되어 React Native에서 React API를 가져올 수 없게 되었다. 이 부분이 반영되지 않은 라이브러리들이 있어서 커스터마이징 해서 사용해야 했다.
안정적으로 사용할 수 있는 네이티브 단의 라이브러리 부족
아무래도 자바스크립트 개발자들이 절대적으로 많다보니 좋은 UI 라이브러리는 많이 있지만 네이티브단을 다루는 라이브러리는 많이 부족한 현실이었다. 우리는 꽤 오랫동안 callback 형태로 결제 상태 변화를 처리하는 방식의 iAP 오픈소스 라이브러리를 사용했는데 문제가 많이 있었다. 앱스토어 계정 검증 등을 위해 앱이 백그라운드로 넘어갈 때 callback을 지워버리거나 앱이 재시작될 때 지연된 트랜잭션을 받아 처리하는 경우 실행할 callback이 없어 구입한 내용이 누락되는 등의. 결국에는 내부에서 이벤트 방식으로 처리하는 네이티브 모듈을 만들어서 해결했다.
퍼포먼스
많이 알고있는 바와 같이 리액트 네이티브는 브라우저 없이 JavascriptCore 엔진에서 돌아가고 Native views, API를 호출하여 사용한다. JS 쓰레드가 메인 쓰레드와 따로 동작하기 때문에 JS단에서의 처리에 blocking 요소가 없다면 화면은 60fps 이상으로 부드럽게 돌아가는 편이다. 복잡한 연산이나 애니메이션 처리 등에서는 취약할 수 있어 최적화되어 있는 네이티브 앱보다는 퍼포먼스가 떨어질 수 있지만 성능 최적화 작업 및 네이티브 단에서의 보완을 통해 충분히 개선할 수 있는 부분이라 생각한다. state를 최대한 immutable 하게 사용하고 로직을 개선해서 불필요한 render 횟수를 줄이고, 필요한 경우 네이티브 단에서 처리하도록 하는 등 우리 역시 현재에서 개선할 수 있는 포인트가 많이 있다.
자바스크립트만으로 개발이 가능한가
답은 No 이다. iOS, 안드로이드를 몰라도 자바스크립트만으로 개발할 수 있어서 리액트 네이티브를 선택한다면 잘못된 선택이라 말리고 싶다. 애플리케이션 로직은 자바스크립트에서 공통으로 개발한다고 하더라도 반드시 네이티브 단에서 개발되어야 하는 부분이 존재한다. 위에 얘기했던 것처럼 네이티브 단에서 처리해주면 더 좋을 부분들이 있어 Native와 React Native의 하이브리드 형태로 개발할 수 있는 역량을 갖추는 것이 이상적인 것 같다. 기존에 모바일 네이티브 개발을 해왔던 개발자라면 크게 어렵지 않게 네이티브 모듈, 컴포넌트를 개발하여 사용할 수 있다. 이와 관련해서는 지난 8월 Airbnb의 테크토크에서 발펴됐던 Hybrid React Native Apps 영상을 강력 추천한다.
리액트 네이티브의 장점
크로스플랫폼 개발
위의 이미지는 지난 9월에 역시 Airbnb 엔지니어가 발표한 React Native @ Airbnb 슬라이드의 한 페이지이다. 모바일만 서비스할 경우 최소 2번(iOS, 안드로이드), 그외 플랫폼까지 지원해야 한다면 클라이언트 구현을 위해 n번의 코드를 플랫폼별로 작성해야 한다. 우리 같은 경우 현재는 80% 이상의 코드를 iOS/안드로이드 간 공유하고 있는데 공통된 애플리케이션의 로직을 플랫폼간에 공유한다는 것은 단순히 시간을 절약하는 것 이상의 장점이 있다고 느낀다. 개발자들 사이의 실력이나 스타일 차이를 많은 부분 보완해주고, 서로의 코드를 리뷰하면서 개선해나갈 수 있다.
우리 팀은 현재 두명의 개발자가 모바일 앱 외에도 관리자, 작가용 CMS를 같이 운영하고 있는데 같은 언어(Javascript), 라이브러리(React + Redux)를 사용하고 있어서 비교적 수월하고 빠르게 구현해올 수 있었다. 워낙 개발이 쉬워져서 초반 스크래치 때는 혼자서도 여러 프로젝트를 만들고 관리하는 것이 어렵지 않지만 기능이 복잡해지고, 여러번의 삽질을 거치고 나면 프로젝트를 왔다갔다 하며 컨텍스트를 전환하는데 많은 에너지가 소모되는데 한가지 언어로 개발하고 있는 것이 이런 부분에서 확실히 절감 효과를 가져다 주는 듯.
라이브 리로드 (Live reload)
많은 분들이 리액트 네이티브의 장점이라고 꼽는 부분이다. 웹 프론트엔드에서는 어느새 너무 당연해진 라이브 리로드는 텍스트 에디터 상에서 수정한 결과물을 새로 빌드하지 않아도 바로 업데이트시켜주는 기능인데 UI를 개발할때 많은 시간을 단축시켜준다. 우리의 경우 다수의 테스트 디바이스에서 실시간으로 변화하는 UI를 확인하면서 개발하는데 예전에 변경할때마다 다시 실행시켜가며 테스트했던 환경으로는 다시 돌아가기 힘들 것 같다.
코드 푸시
런던에 있었던 작년에 클라이언트의 js bundle 파일 업데이트를 통해 앱 업데이트 시 심사를 거치지 않고 바로 업데이트 할 수 있다는 얘기를 들었을 때, 같이 있던 개발자들 모두 “애플이 그걸 허용할까?”를 묻고 고개를 갸우뚱 했었다. 그 당시에는 믿을 수 없게도 애플은 코드 푸시때문에 앱을 리젝시키지 않는다. 물론 네이티브 단의 코드가 변경되거나 새로운 라이브러리를 추가할 때는 업데이트 심사를 거쳐야 하지만 UI 변경같은 이슈는 코드 푸시를 통해 쉽고 빠르게 앱을 업데이트 할 수 있다. (근데 요즘 앱스토어 심사도 워낙 빨라져서…)
정리하자면
리액트 네이티브를 통한 앱 개발은
- 플랫폼 간 코드의 많은 부분을 공유할 수 있는 점이 큰 장점
- UI 개발 생산성은 기존 개발 방식과 비교할 수 없이 좋음
- 자바스크립트만으로 개발할 수 없고, 반드시 네이티브 단의 개발과 함께 해야 함
- 개발자가 모바일 플랫폼 개발에 대해 이해하면 이해할수록 훨씬 좋은 결과를 얻을 수 있음
추가로 보면 좋을 것 같은 문서, 비디오
- Airbnb Frontend Tech Talk — https://www.youtube.com/watch?v=tUfgQtmG3R0
- Performance Limitations of React Native and How to Overcome Them — https://medium.com/@talkol/performance-limitations-of-react-native-and-how-to-overcome-them-947630d7f440#.z1bo2rnox
- React Native로 만들어진 유명(?) 앱들 — https://facebook.github.io/react-native/showcase.html
