React Native

Learn once, write anywhere.

— React Native 최초 공개 당시 자바스크립트 생산성을 강조하며 내세운 대표 슬로건

자바스크립트로 모바일 앱을 쉽게 만든다고 해서 시작했는데, 정작 개발 시간의 80%는 CocoaPods 패키지 충돌을 해결하고 Gradle 캐시를 지우는 데 쓰게 된다. ~~안드로이드 가상 기기에서는 멀쩡히 잘 돌아가는 코드가 아이폰 실물 기기에서 폰트나 그림자 렌더링이 깨져 보이면 깊은 허무함이 밀려온다.(...)~~

1. 개요

메타에서 개발하고 오픈소스로 배포한 크로스 플랫폼 모바일 애플리케이션 프레임워크. 기존의 모바일 앱 개발 방식이 iOS용 Swift/Objective-C 개발자와 안드로이드용 Java/Kotlin 개발자를 각각 따로 채용해야 했던 비효율성을 해소하고자 세상에 등장했다. React의 사상과 자바스크립트 언어를 활용하여 하나의 코드베이스(Single Codebase)로 양대 운영체제에서 완벽하게 구동되는 네이티브 앱을 구축할 수 있게 함으로써, 모바일 개발 시장의 판도를 단숨에 흔들어 놓았다.

2. 자바스크립트가 진짜 네이티브 UI를 그리는 원리

React Native의 작동 원리는 기존의 웹뷰(Web View) 방식 하이브리드 앱들과 근본적으로 다르다. 웹뷰 방식은 단순한 웹 브라우저를 모바일 앱 화면에 꽉 채워 띄우는 편법이어서 성능이 처참했으나, React Native는 실제 iOS/Android의 네이티브 위젯을 끌어와 매핑한다. 자바스크립트 엔진(V8 엔진 혹은 Hermes 엔진)에서 돌아가는 JS 코드가 화면을 어떻게 그리라는 지시를 보내면, 프레임워크가 이를 받아서 OS에 실제 네이티브 렌더링을 요청하는 방식이다. 이 통신을 담당하는 가상의 통로를 브릿지(Bridge)라 부르는데, 매 프레임마다 대량의 데이터가 이 브릿지를 오가게 되면 병목 현상이 터져 화면이 사정없이 버벅거린다. ~~이 브릿지 아키텍처의 한계를 극복하기 위해 메타는 수년에 걸쳐 엔진을 뜯어고치는 공학적 노가다를 행하고 있다.~~¹

3. 개발자들을 탈모로 이끄는 빌드 지옥과 네이티브의 벽

웹 개발자 출신이 React Native에 입문할 때 가장 먼저 마주하는 거대한 장벽은 바로 Xcode와 Android Studio이다. 분명 자바스크립트 코드 몇 줄만 고쳤을 뿐인데, iOS 빌드를 돌리는 순간 수십 개의 CocoaPods 의존성 충돌과 인증서(Certificate) 만료 오류가 시뻘겋게 쏟아져 내린다. 안드로이드 역시 Gradle 버전 불일치로 컴파일 자체가 불가능한 상황이 심심치 않게 터진다. 게다가 모바일 카메라 하드웨어나 푸시 알림, 결제 모듈 등 하드웨어 깊숙한 기능들은 어쩔 수 없이 Kotlin이나 Swift로 짜여진 네이티브 라이브러리를 바인딩해 써야 하는데, 이 라이브러리들이 OS 업데이트를 따라가지 못해 빌드가 파괴되는 참사가 빈번하다.(...)

4. 관련 밈 및 드립

4.1. Learn once, write anywhere vs Write once, run anywhere

과거 자바가 외쳤던 '한 번 짜면 어디서든 돌아간다(Write once, run anywhere)'와 달리, 메타는 '한 번 배우면 어디서든 짤 수 있다(Learn once, write anywhere)'는 현실적인 슬로건을 내세웠다. 이는 즉, 안드로이드와 iOS의 고유한 플랫폼 차이점(하드웨어 버튼 유무, 노치 디자인 영역, 뒤로 가기 제스처 등)을 프레임워크가 100% 가려주지 못하므로, 결국 각 OS 플랫폼에 특화된 분기 처리를 덕지덕지 발라야 함을 기가 막히게 암시한 것이다.(...)

4.2. Hermes와 새로운 아키텍처(JSI)

메타는 자바스크립트 앱의 시동 속도(TTV)를 높이기 위해 'Hermes'라는 모바일 최적화 경량 JS 엔진을 직접 개발했다. 이에 더해 기존의 고질적인 브릿지 병목을 제거하기 위해, C++ 객체를 자바스크립트가 직접 참조할 수 있도록 하는 JSI(JavaScript Interface) 기반의 '새로운 아키텍처(New Architecture)'를 수년째 적용 중이다. 개발자들은 새 아키텍처 발표 때마다 '드디어 네이티브 속도가 나온다'고 열광하지만, 정작 기존 서드파티 라이브러리들과의 호환성이 모조리 깨져 한동안 빌드 에러를 처리하느라 집엘 못 갔다.

5. 여담

페이스북 내부 해커톤의 결과물: React Native는 2013년 여름, 페이스북 내부의 한 해커톤 프로젝트에서 시작되었다. 웹용 React를 네이티브 모바일 뷰에 연결할 수 있지 않을까 하는 엉뚱한 상상이 대형 오픈소스 프로젝트의 시초가 되었다.
Expo라는 달콤한 구원투수: Xcode나 Android Studio를 전혀 깔지 않고도 React Native를 개발할 수 있게 도와주는 'Expo' 생태계가 존재한다. 초보자들에게는 한 줄기 빛과 같으나, 서비스 규모가 조금만 커져서 블루투스 등 기기 제어 커스텀 네이티브 모듈을 붙여야 하는 순간 Expo 환경을 벗어나야 하는(Eject) 강도 높은 고통의 시기가 찾아온다.
에어비앤비의 철수 선언: 2018년, React Native의 상징적인 대규모 실무 레퍼런스였던 에어비앤비가 '기술의 복잡성, 네이티브와의 디버깅 이중 비용'을 이유로 React Native 사용을 완전히 중단하고 100% 네이티브 모바일 코드로 리팩토링할 것을 발표하여 하이브리드 앱 생태계에 거대한 충격을 안겨주었다.

6. 관련 문서

실제로 에니메이션 효과를 줄 때 매 프레임 연산을 JS 스레드와 네이티브 스레드 사이에서 교환해야 했기 때문에, 초창기 RN 앱은 스크롤만 빨리 해도 화면이 투명하게 비어 보이는 참극이 일어났다. ↩