React Native 약사

탄생

React Native는 2013년 페이스북 내부 해커톤(hackathon)에서 탄생했습니다.

In the essence of Facebook’s hacker culture, React Native started as a hackathon project in the summer of 2013.

(In the beginning: React Native’s roots에서 인용)

React 이야기부터 시작하자면

React가 대규모로 사용됨에 따라 페이스북은 React와 웹 기술의 장점을 더욱 깊이 체감하게 되었고, 네이티브 개발도 웹처럼 Move fast 할 수 있기를 원했습니다.

빠른 반복(Rapid iteration cycle): 웹은 하루에 두 번 배포가 가능할 정도로 제품 반복 주기가 짧습니다.
빠른 피드백(Immediate testing feedback): 웹 배포는 즉시 사용자에게 도달하며, A/B 테스트 등 실험 결과를 바로 확인할 수 있어 제품 진화가 빠릅니다.
빠른 개발 속도(Rapid development velocity): 브라우저를 새로고침하는 것만으로 반영되며, 앱을 다시 컴파일할 때까지 기다릴 필요가 없습니다.

이 목적을 달성하기 위해 페이스북은 세 가지 방안을 시도했습니다.

WebView: 네이티브에서 WebView 컨테이너를 제공하고 비즈니스 로직은 웹 기술로 개발하는 방식입니다. 웹 개발 경험을 그대로 가져올 수 있다는 장점이 있지만, 웹 기술의 한계로 인해 네이티브와 대등한 경험을 제공할 수 없었고, 결국 성능과 확장성이 기대에 미치지 못해 중단되었습니다.
Porting React to native: React를 네이티브 구현체로 이식하는 미친 아이디어였습니다. 2015년에 iOS 버전(ComponentKit)을 완성하고, 2017년에 안드로이드 버전(Litho)을 출시했습니다. 이를 통해 네이티브 개발에서도 UI 예측 가능성, Flexbox 레이아웃 등 React의 여러 장점을 누릴 수 있게 되었습니다. 하지만 개발 효율 향상이라는 초심을 만족시키기에는 부족했고(작은 변화에도 다시 컴파일해야 함), 웹용 React와 호환되지 않아 Relay와 같이 React 기반의 웹 생태계 도구들을 활용할 수 없었습니다.
Scripting native: JavaScript를 통해 네이티브 API를 호출하는 방식입니다. 웹 개발의 빠른 반복 능력을 가지면서도 웹 기술에 국한되지 않고, JavaScript 생태계를 벗어나지도 않는 완벽한 방안처럼 보였습니다.

그리고 React Native가 바로 세 번째 방안의 최종 결과물입니다.

2015

React.js Conf Round-up 2015: React Native를 처음으로 소개함. 강연 영상은 React.js Conf 2015 Keynote - Introducing React Native, React.js Conf 2015 Keynote 2 - A Deep Dive into React Native 참고
F8 2015: New Open Source Tools for Mobile Developers: React Native 출시 및 오픈 소스화. 강연 영상은 F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile 참고
React Native: Bringing modern web techniques to mobile: 첫 번째 공식 소개 글 발표, 당시 iOS만 지원
React Native for Android: How we built the first cross-platform React Native app: React Native의 안드로이드 지원 발표

2015년 1월 React.js Conf에서 이 내부 프로젝트가 처음 공개되었고, 5월 F8 컨퍼런스에서 정식으로 오픈 소스화되었습니다.

초기에는 iOS만 지원했으나 같은 해 9월 안드로이드도 지원하게 되었습니다.

2016

Introducing Hot Reloading: Hot Reloading 지원
Dive into React Native performance: 성능 전면 향상
React Native on the Universal Windows Platform: 윈도우 생태계 진입
Samsung Committed to Bringing React Native to Tizen: 삼성 사물인터넷(IoT) 생태계(Tizen 시스템) 진입
Right-to-Left Layout Support For React Native Apps: RTL 레이아웃 지원
0.36: Headless JS, the Keyboard API, & more: 0.36 버전 발표, 백그라운드 작업, 키보드 조작 등 지원
Introducing Button, Faster Installs with Yarn, and a Public Roadmap: 0.37 버전 발표, <Button /> 컴포넌트 추가 및 Yarn 지원
Easier Upgrades Thanks to Git: 버전 업그레이드 작업 단순화

Microsoft UWP와 Samsung Tizen 지원은 React Native가 모바일을 넘어 PC(Win 10), 게임 콘솔(Xbox One), 스마트 밴드(Gear Fit 2), 스마트 TV(SUHD), 심지어 홀로렌즈(HoloLens)까지 확장되었음을 의미합니다.

또한 개발 경험, 성능, API 능력 등도 빠른 반복을 통해 지속적으로 향상되었습니다.

2017

A Monthly Release Cadence: Releasing December and January RC: 월간 릴리스 계획 수립
Using Native Driver for Animated: 애니메이션 성능 및 사용성 추가 향상
Better List Views in React Native: List View에 대한 더욱 친숙한 지원 제공
Introducing Create React Native App: 공식 스캐폴딩 도구 Create React Native App 출시
React Native Monthly #1: Airbnb, Microsoft 등 8개 팀과 정기 월간 회의 개최(6개월간 지속)
React Native Performance in Marketplace: 페이스북의 주요 React Native 앱인 Marketplace에서의 성능 최적화 사례 소개

월간 반복 계획을 수립하고 커뮤니티 팀이 참여하는 정기 회의를 개최했습니다. 성능은 여전히 중요한 방향이었으며 애니메이션, List View 등 주요 업데이트가 성능 최적화와 관련되었습니다.

또한 Prepack과 같은 컴파일 타임 성능 최적화 탐색을 시작하여 React Native 코어의 초기화 시간을 대폭 단축하고자 했습니다.

2018

Implementing Twitter’s App Loading Animation in React Native: 트위터 로딩 애니메이션에 사용됨
Using AWS with React Native: 아마존 클라우드 컴퓨팅 생태계와 연동
Building For React Native: InputAccessoryView 지원
Using TypeScript with React Native: 커뮤니티에서 TypeScript 지원 제공
State of React Native 2018: React Native가 페이스북 내외부에서 널리 사용됨에 따라 핵심 팀이 아키텍처 업그레이드를 시작함
Releasing 0.56: 0.56 버전 발표, Babel, Android SDK, Xcode, Flow 등 의존성 버전 업그레이드
Introducing new iOS WebViews: iOS에서 WKWebView로 전환
Open Source Roadmap: 핵심 모듈 경량화 계획 수립 및 페이스북 내부 인프라 일부 오픈 소스화
The State of the React Native Community in 2018: 오픈 소스 커뮤니티 관리 규범 수립

네이티브와 React Native 혼합 앱을 더 잘 지원하기 위해 핵심 팀은 스레드 모델 재구축, React 비동기 렌더링(async rendering) 지원, React Native 코어 단순화 등 대대적인 개편을 포함한 아키텍처 업그레이드 계획(Fabric)을 가동했습니다. 또한 페이스북은 JSI를 포함한 일부 인프라를 오픈 소스화할 계획을 세웠습니다. 자세한 내용은 Open Sourcing Internals and Updated Tooling을 참고하세요.

다른 한편으로 오픈 소스 커뮤니티 관리도 버전 관리, RFC, 소통 및 토론 등을 포함하여 정규화되었습니다.

2019

Releasing React Native 0.59: 0.59 버전 발표, React Hooks 지원, 안드로이드 JSC 업그레이드, 핵심 모듈 경량화 계획 지속 진행
Mobile Innovation with React Native, ComponentKit, and Litho: 페이스북의 모바일 기술 스택(React Native + ComponentKit, Litho) 공유
Meet Hermes, a new JavaScript Engine optimized for React Native: JS 엔진 수준의 성능 향상 실현. Hermes: An open source JavaScript engine optimized for mobile apps, starting with React Native 참고

오픈 소스 커뮤니티의 참여로 아키텍처 업그레이드 계획이 빠르게 진전되었으며, 일부 비핵심 모듈이 React Native 코어에서 분리되어 독립적으로 유지관리되기 시작했고 그 결과는 성공적이었습니다.

또한 성능 최적화는 멈추지 않았으며, 더 나은 성능을 위해 안드로이드 플랫폼의 JS 엔진을 JavaScriptCore에서 Hermes로 교체하기까지 했습니다.

탄생