어느날 이런 질문을 받았다.
Q. React Native를 사용하셧다는데 동작원리 실행과정을 설명해주실수 있을까요??
?? 답을 하지못하였다.
그후에 내자신이 너무 한심해서 기록으로 남겨본다.
간단하게 정리하고 들어간다
JAVASCRIPT코드를 네이티브 모듈과 Bridge를 통해 각 플랫폼의 네이티브 UI로 변환하고, 이를 바탕으로 크로스플랫폼 앱을 렌더링하는 방식으로 동작한다.
React Native는 Javascript로 작성된 코드를 네이티브 모바일 애플리케이션으로 변환해 실행하는 크로스플랫폼 프레임워크이다. React Native앱이 실행되는 과정을 요약하면 다음과 같다.
1.Javascript 실행
- React native는 기본적으로 js코드를 기반으로 동작하낟. 개발자가 작성한 Js/jsx는 React라이브러리의 구조를 따르며, Javascript가 실행될 때 JavaScript엔진을 통해실행된다. ios는 JavascriptCOre Android에서는 Hermes(옵션)을 통해 실행된다.
2.Bridge를 통한 통신
- React Native의 핵심개념은 Bridge이다. Javascript코드와 네이티브 모듈이 서로 통신할수 있는 통로역할을 한다. Javascript에서 수행된 로직이나 이벤트는 Bridge를 통해 네이티브로 전달되고, 반대로 네이티브 에서 발생한 이벤트나 작업은 다시 Javascript로 전달된다.
- 이 Bridge는 비동기적으로 동작하며, 양방향으로 데이터를 주고받는다.
3.네이티브 모듈 실행
- React Native는 네이티브 UI요소와 API에 접근할수 있도록 네이티브 모듈을 사용한다. 이러한 모듈은 Javascript가 아닌 Swift, Objective-c 또는 Java/Kotlin으로 작성되며 , 카메라, 위치 , 파일 시스템 등의 디바이스 기능을 사용할수 있게 해준다.
4.UI렌더링
- React Native는 React와 동일하게 Virtual DOM을 사용하여 UI를 선언적으로 정의한다. Javascript로 작성된 UI코드는 네이티브의 UI컴포넌트로 변환되어 렌더링 된다. 각플랫 폼에 맞는 네이티브 뷰가 생성되며, IOS에서는 UIVIEW, Android에서는 View를 기반으로 렌더링이 이루어진다.
5.실행중 네이티브 이벤트 처리
- 앱이 실행되면서 네이티브에서 발생하는 이벤트(ex: 터치, GPS신호 등)는 Javascript코드로 전달된다. 이때 React Native는 네이티브의 이벤트 루프와 연동하여 실시간으로 이벤트를 처리한다.
- Javascript와 네이티브간의 성능 최적화
- React Native는 Bridge를 통해 Javascript와 네이티브 간의 통신을 하지만, 이를 자주하게 되면 성능 저하가 발생한다. 이를 해결하기위해 Hermes엔진(facebook에서 개발한 js엔진)을 도입해 성능을 최적화 할수있다. 이를통해 Andoird앱에서의 시작시간을 단축하고 메모리 사용을 줄인다.
front-end-developer