https://www.youtube.com/watch?v=1ojA5mLWts8&t=837s
이에 대해 정리하기 위해선 우선 DOM 과 가상 DOM의 개념에 대해서 알아야 한다.
HTML 을 주문서라고 한다면 이를 실체화시키는 것은 웹 브라우저의 몫이다. (예를 들어, div, p, input tag 의 실질적 역할)
HTML 주문서를 가지고 실제 작동하는 객체 형태로 만들어 놓은 것을 DOM 이라고 한다. 공식 문서에서는 DOM을 ‘HTML이나 XML 문서를 실체로 나타낸 API 라고 정의한다.’ 그렇다면 가상 DOM은 무엇이며 react native 에서는 왜 이러한 방식을 차용하고 있을까.
물리 DOM 과 가상 DOM
앱에서 버튼을 누르고 스크롤을 하는 등 사용자가 여러가지 작업을 하면 매번 화면은 달라진다. 변화가 생길 때 마다 실제 DOM 을 가지고 조작을 한다면 이는 매우 무거울 것이며 속도가 느리기 때문에 사용자 입장에서는 큰 불편일 것이다.
그래서 react native 는 화면을 보여주기 전에 자바스크립트로 만들어진 가상 DOM을 만든다. 그 다음 실제 DOM 과 가상 DOM을 비교하고 전, 후로 발생하는 차이만큼만 화면에 반영하여 보여준다. (Diffing)(얄코의 라디오에서는 집을 DOM, 미니어처를 가상 DOM 으로 비유하며, 가구를 재배치하는 상황을 이야기한다.)
특정한 시점이 되면 react native는 가상 DOM을 가지고 실제 DOM을 조작하는데, 이를 수행하는 패키지를 렌더러라고 한다 그리고 그 시점은 ‘렌더링 시점' 이라고 부른다. react 와 react native는 모두 react 라는 패키지를 이용하는데 이 패키지가 가상 DOM을 만드는 역할을 한다. (ex) React.createElement)
React : JSX → (with react package) → 가상 DOM → (with DOM renderer) → 실제 DOM
React Native : JSX → (with react package) → 가상 DOM → (with native renderer) → 실제 DOM (UI for android/ios)
참고로 react native 의 렌더러인 (native renderer)의 모습은 확인할 수 없다. 그 이유는 렌더링 작업이 네이티브 모듈안에서 이루어지기 때문이다. (네이티브 모듈 쪽에서는 JavaScriptCore 라는 자바스크립트 엔진이 돌아간다).
리액트네이티브가 렌더링 되면 두 가지 스레드가 생기는데 (UI thread, Javascript thread) 이 둘은 서로 메세지 큐 방식으로 서로 데이터를 주고받는다고 한다. 이런 방식의 프레임워크를 브리지 방식 프레임워크라고 말한다.
정리
정리하자면 리액트 네이티브는 자바스크립트 엔진을 이용하여 네이티브 모듈들과 소통한다. 이를 브릿지 방식이라고 한다 (자바스크립트와 네이티브의 연결). 결국 이 브릿지 방식은 네이티브 방식과 비교해 한 단계를 더 거치기 때문에 렌더링 속도에서 한계를 갖는다. 최근, 메타는 더 이상 브릿지 방식을 차용하지 않겠다고 발표하기도 했다.
모든 컴포넌트들을 재렌더링 하는 것은 손해이다. 사용자가 특정 행동을 했을때 변한 부분만 화면에 반영해주면 된다. 물리 dom이 수정해야 할 그림이라고 한다면, 가상 dom은 연습장이라고 보면 된다. 우선 연습장에 그려보고 수정되어야 할 부분만 반영하는 것이다.
