React Native 동작원리

React Native의 동작 원리는 리액트의 Virtual DOM과 관련되어 있다. DOM 수정은 값비싼 동작이기 때문에 React는 변화를 바로 렌더링 하는 대신 메모리의 가상 DOM을 이용해 변화가 필요한 곳을 계산하고 최소한의 변경사항만 렌더링한다. React Native는 같은 원리를 이용해 브라우저의 DOM이 아닌 Objective-C API를 호출하여 IOS 컴포넌트를 렌더링하고, 자바 API를 호출하여 Android 컴포넌트를 렌더링한다. 이는 Bridge가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 떄문에 가능하다.

 

React Native Bridge

• RN Bridge는 C++ / Java로 제작되어 네이티브와 자바스크립트 스레드 사이의 통신을 가능하게 해준다.
• 메시지 전달을 위한 커스텀 프로토콜이 사용된다.

 

• Native에서 Event를 listen하고 화면을 통제한다.
• Event가 발생하면 Native(IOS, Android)는 Event에 관한 모든 데이터를 수집한다.
• React Native의 Bridge가 Event 정보를 받고 JSON 메세지를 생성한다.
• JavaScript 코드는 그 메시지를 받는다.
• 메시지에 대한 응답으로 Bridge를 통해 Native에게 이벤트 로직 처리에 대한 메시지를 전달한다.
• Native는 받은 메시지에 따라 UI를 업데이트한다(실질적인 UI 업데이트는 Native에서 처리한다).