새 리액트 네이티브 아키텍처 설명: 두번째 파트
작성자: LORENZO SCIANDRA
작성일: 2019/04/02
번역일: 2019/10/25
이 글은 formidable.com에 기재된 The New React Native Architecture Explained: Part Two을 번역한 것입니다.
Part Two: JSI와 JSC
2018년에 처음 발표된 리액트 네이티브 재구성 프로젝트는 페이스북이 이 크로스 플랫폼 모바일 솔루션에 오랫동안 제기되어 온 이슈에 엄청난 공을 들여서 착수한 프로젝트입니다.
이번 시리즈에서는 리액트 네이티브의 새 아키텍처의 주요 요소들에 대해서 알아보겠습니다. 코드를 보여드리기보단, 가능한한 설명에 치중하도록 하겠습니다. 또 이 프로젝트를 도입하며 저희를 흥분시켰던 것들을 공유하고자 합니다.
이 두번째 파트에서는 어떻게 리액트 네이티브가 여러분이 짠 코드를 소화시키고, 또 이번 아키텍처 재구성에서 어떤 것들이 바뀌었는지에 대해서 알아보겠습니다.
자바스크립트의 구조 때문에, 리액트 네이티브 팀은 모바일 앱을 구동시킬 때 자바스크립트 인터프리터 엔진에 의존할 수 밖에 없습니다. 현 아키텍처(2019/10/25 RN v0.61기준에서는 구[舊] — 역주)에서 리액트 네이티브 팀은 JavaScriptCore (JSC)를 직접적으로 사용하기로 결정했었는데, 이는 애플의 iOS 가이드라인 룰인 “WebKit 프레임워크와 WebKit 자바스크립트를 정석적으로 사용해야 한다”에 따른 것이었습니다. (JSC는 WebKit이 사용하는 프레임워크입니다.)
(이전에 언급했던 리액트 네이티브의 두번째 파트)의 요소를 향상시키기 위해, 리액트 네이티브 팀은 개발자가 작성하여 번들링 되고 minified된 자바스크립트 코드와, 이를 “소화”할 엔진을 적절하게 분리시키기로 결정했습니다. 이는 이 둘 사이에 세번째 요소인 자바스크립트 인터페이스 (JSI) 를 명시적으로 등장시키며 가능하게 되었습니다.
JSI는 사실 리액트 네이티브의 일부는 아닙니다 — 이것은 통합화, 경량화, 일반화된, (이론적으로는) 모든 자바스크립트 엔진을 위한 레이어입니다. 그렇지만 이 새 아키텍처의 관점으로 폭넓게 바라봤을때에는, 몇가지의 매우 중요한 개선이 이루어지게끔 합니다.
첫번째는 누구나 짐작할 수 있듯이, JSC는 현 시점에서 쉽게 다른 대체 엔진으로 바뀔 수도 있습니다. (혹은 최근에 리액트 네이티브 버전0.59에서처럼, 새 버전의 JSC로) 다른 옵션으로는 여러분이 아실수도 있는 마이크로소프트의 ChakraCore나 구글의 V8이 있습니다.
두번째 개선점은 — 명실공히 이 재구성 프로젝트의 주춧돌이라고도 할 수 있는 — 바로 “JSI를 이용해서 자바스크립트가 C++ 호스트 객체들을 참조하거나 그들을 대상으로 함수를 실행할 수 있다”는 점입니다. 이게 무슨 말이냐면, 이제 드디어 우리는 앞의 글에서 설명했던 코어 이슈: 자바스크립트와 네이티브 두 영역간의 소통 문제에 손을 댄 것입니다. 이제 이 두 영역은 서로를 아주 잘 인지할 것이며, 또한 JSON 메세지를 만들어 보내기 위해 serialize할 일도 없을 것이고, 브릿지 섹션의 혼잡 요소(다음 글에서 이에 대해 좀 더 알아보도록 하겠습니다.) 를 모두 제거합니다.
이것은 굉장한 변화인데요, C++은 자바스크립트에 의존하지 않고 iOS와 안드로이드에서 둘 다 사용가능한 몇 안되는 언어중 하나로 오랫동안 자리매김하고 있었기 때문입니다; 안드로이드의 네이티브 코드는 C\C++ 로 짜여져 있고, (자바와 코틀린은 자바 네이티브 인터페이스에 의해 C\C++로 “해석”되어지는 것이죠) iOS도 비슷하게 C\C++가 default로 서포트되고 있습니다. (Objective-C는 사실 C의 strict한 superset에 지나지 않으니까요).
그렇기 때문에, 리액트 네이티브 아키텍처 재구성의 이번 파트는 현 구조의 대규모 변경을 가능하게 해 주고, 여러분의 앱에 C++을 더 쓸 기회를 마련해 주며, 부분 리팩토링(brownfield development — 옛 구조와 리팩토링한 구조가 섞인 상태로 서비스 되는것 — 역주)을 용이하게 해 줍니다.
우리가 리액트 네이티브의 구조 중 두번째 파트를 새 아키텍처로 바꾼다면, (전체 도표는 첫번째 글에서 보실 수 있습니다.)아래와 같습니다.
이것을 끝으로 리액트 네이티브 새 아키텍처 탐구의 두번째 파트를 마치도록 하겠습니다. 빠른 시일 내에 다음 포스트들도 올리도록 하겠습니다. 그동안 이 글을 동료 개발자들에게 공유하는 것을 잊지 마세요. 또한 트위터 계정을 통해 질문을 하셔도 됩니다. (DM도 가능합니다).
설명드린 부분에서 새 아키텍처의 다른 파트들에도 많은 발전 가능성이 보이실 겁니다. 여러분이 코드를 (전혀) 다시 작성하지 않고도 이 강력한 변화가 여러분의 코드베이스에 끼칠 영향에 대해 많은 기대를 하시길 바랍니다.
다들 이 새로운 변화의 흐름에 편승하시길 바랍니다!
