RN에서의 새로운 아키텍처를 보기 전에 기존의 방식에 대해서 한번 봐야겠다고 생각이 들었다.
용어 정리
javascript core : rn에서 javascript 코드를 실행가능하게 하는 프레임워크.(ios의 경우 os에서 직접 해주고 android의 경우는 프레임워크가 없어서 앱 자체와 함께 번들링(파일을 묶어줌) 시킨다고 한다.)
javascript thread : js core가 js bundle을 실행시킬때 사용.
bundling : 파일을 묶어준다는 뜻같은데 잘 몰라서 찾아봤다. 정확하게 말하면 모듈들의 의존성 관계를 파악해서 그룹화시켜주는 작업을 뜻한다고 한다. 여기서 또 모듈모듈 말은 들어봤지 정확이 뭔지 몰라 찾아보니 모듈이란건 분리된 파일을 말한다고 한다. 결론적으로 bundling이란건 분리된 파일들을 하나로 합쳐주는 작업이라고 이해하면 될것 같다..
그럼 그림상에 적힌 js bundle이란건 javascript파일들을 하나로 합쳐주는 작업이라고 보면 될 것 같당.
번들링 참조
native ui/thread : 네이티브 모듈 실행, ui 렌더링, 이벤트 작업 처리에 사용
shadow thread : 화면에서 렌더링 하기전에 각 요소들의 위치값을 계산하는데 사용
yoga : 화면의 ui요소들의 위치를 계산하는데 사용되는 레이아웃 엔진 이름.
rn앱 실행시 모든 자바스크립트 코드는 그림에 있는것처럼 js bundle패키지로 번들링이 된다.
그림상에 보이는것처럼 bridge는 js쓰레드와 native쓰레드간에 상호작용을 도와준다.
간단히 설명해보자면, 데이터가 브릿지를 통해 전송될때마다 json형태로 serialize시켜줘야한다.
예를들면 택배포장을 잘 해주고 이 택배를 브릿지를 통해서 네이티브쓰레드로 넘겨준다. 넘겨주기 전에는
택배포장을 잘 풀어서 디코딩시켜줘서 전달해야한다. 이렇게 하면 드디어 최종적으로 네이티브 코드가 실행된다.
JSI
여기서 브릿지를 통해서만 js와 native쓰레드가 서로의 환경을 이해한다는점에서 서로 같은 환경으로 인식하지 못한다는걸 알 수 있다. 이런 점때문에 현재 새로나온 아키텍쳐보다 효율이 떨어진다고 생각한다.
새로 나온 아키텍쳐에서는 기존 bridge방식이 사라지고 js와 native가 일대일 방식으로 서로의 환경에서 직접적으로 호출을 가능하게 해준다. 이를 jsi(javascript interface)라고 한다.
c++에 대해서는 잘 모르지만 jsi의 장점으로 C++로 작성됐다는걸 어필하는걸 찾아볼수 있다. 잘 읽어보면 스마트tv, 스마트워치 같은 다양한 영역으로 시스템확장이 가능하다고 한다. 그만큼 rn이 미치는 영역이 넓어진다라고 이해했다.
Fabric
기존의 렌더링시스템
앱 실행 ==> react코드(javascript)실행 ==> ReactShadowTree(C++) ==> 네이티브
위에서 용어정리에서도 말했듯이, shadow tree는 레이아웃 엔진에서 화면상의 각 요소들의 위치를 계산하는데 사용한다. 이 과정이 끝나면 네이티브의 HostViewTree구조로 넘어가게 된다.
단점 ==> 기존 방식은 데이터 전송을 위해 뭘 사용한다고 했지?? bridge 무조건 bridge를 통해서만 데이터를 전송했기때문에 전송속도가 느려지는 단점이 있다. 이 과정에서 또 불필요한 데이터 복사가 발생하는데,
예를들어 흔히 잘 아는 태그 사용시 하나의 노드로 저장되는게 아니라 react에서 하나 shadow tree에서 하나 각각 합쳐서 2개의 노드가 생성된다고 한다. 말그대로 불필요한 동작을 실행하게 된다.
그럼 이제 기존 렌더링시스템에 대해서 알아봤으니 새로운 렌더링 시스템을 알아보자. 바로 fabric
새로운 아키텍쳐에서는 이제 bridge대신 jsi가 사용된다고 했다. jsi의 장점은 뭐였더라??
js와 네이티브쓰레드간에 직접적인 상호작용.bridge의 불필요한 과정이 다 사라졌다는 얘기였다.
기존 아키텍처의 단점인 불필요한 노드생성 이 문제도 해결이 된다. js와 네이티브 ui쓰레드간에 섀도우 트리가 공유되어서 양쪽 모두에서 직접적으로 상호작용할수 있게된거다. 각자 다른 노드로 가지고 있을 필요가 없다는 얘기다. 결론적으로 장점은 메모리 소비를 줄일수 있다!!
터보모듈
현재는 앱 실행시에 js에서 사용하는 모든 네이티브 모듈들이 앱이 열리기 전에 초기화시켜야 된다고한다.
사용자가 어떤 모듈이 필요하지않은데 굳이 이런 모듈까지 초기화를 시켜준다고 한다.
하지만 터보모듈은 사용자가 필요로 할때만 불러올수 있다고 한다. 이렇게 되면 초기 앱 실행시 불필요한 동작이 또 줄게 될것이고 이는 rn앱이 열리는 시간을 확 줄여줄수 있다고 한다.
codeGen
자바스크립트는 동적언어
jsi는 c++로 구성됐다고했다. 난 c++에 대해서 잘 모르지만 정적타입의 언어라고 한다.
언어의 타입이 다르니 서로간의 원활한 통역을 위해서 코드젠이라는 정적타입 검사기가 포함됐다고 한다.
그림으로 뉴아키텍처에 대해 정리하면 위와 같다.
그림을 살펴보면 기존 아키텍쳐는 javascript engine만을 사용하는것 같은데, 새로운 아키텍쳐는 jsi가 c++로 구성이되서 그런지 자바스크립트 엔진이면 모든게 다 사용 가능한것 같아 보인다.(chakra, v8엔진, hermes...)
