RN이 동작하는 원리를 알기 이전에 먼저 Thread 의 개념을 알아야한다.
Thread란?
실행되는 프로세스 내에서 실제로 작업을 실행하는 주체로, 가장 작은 작업의 단위로 볼 수 있다.
명령어를 실행하여 처리하는 주체이다.
음식점에서, 여러가지 음식을 만드는 행위로 빗대어 말할 수 있다. (= 다양한 작업을 실행하는 주체)
보통 프로세스 하나 당 하나의 스레드를 가지고 있지만, 환경에 따라 두 개 이상의 스레드를 가질 수 있으며, 이를 멀티스레드 라고 한다.
React Native 의 4가지 Thread
React Native 에는 4가지 Thread가 있다.
1. Main Thread 또는 UI Thread
Native 영역에 레이아웃을 그려주는 역할을 한다.
2. JavaScript Thread
개발자가 작성한 JavaScript 가 실행되는 곳
3. Native Module Thread
Native Module 을 다룰 때 사용하게 되는 Thread 이다. 특정 리소스 등을 요청하고자 할 때 사용된다.
4. Shadow Thread
virtual DOM 으로부터 새로운 Layout 으로 변환하도록 계산해주는 역할의 스레드이다.
React Native 의 최초 실행프로세스
React Native 앱이 최초로 실행되고, 첫 렌더를 하는 과정은 아래와 같다.
1. 앱 아이콘을 눌러 앱 화면(Activity 또는 delegate)이 호출되면, Main Thread 에서 JavaScript를 로딩하게 되어있다.
2. 로딩과정이 끝나면 Main Thread 는 이 JS 코드들을 JavaScript Thread로 보낸한다.
3. JavaScript Thread 에서는 *Diffing 작업을 한다.
Diffing 이란?
Virtual DOM과 실제 DOM element를 비교하며, state 또는 props 등이 변경되었는지 체크하고, 새로운 Virtual DOM 을 만들어내는 과정을 의미함.
컴포넌트 내에 state가 변경되면, React 는 해당 컴포넌트를 dirty 하다고 표시하고, batch 에 추가한다.
그러고, Virtual DOM 엘리먼트와 실제 DOM 엘리먼트를 순회 & 비교하면서 dirty 로 체크된 엘리먼트들을 처리한다.
속성값 또는 태그, 컴포넌트 등 업데이트를 마무리 한 후(batch 에 쌓인것들을 모두 처리한 후), 한 번 실제 DOM 에 결과를 업데이트 한다.
더 자세히 알고싶다면 아래 블로그 참고! 이해하기 쉽게 작성해주셨다.
https://velog.io/@naamoonoo/리액트는-어떻게-작동할까-Diffing-3주차-회고
4. 위 과정이 끝나면, Shadow Thread 에 새로운 Virtual DOM 을 넘기게 된다. 전달받은 Virtual DOM 을 실제 Native 에서 Layout 을 계산하는 과정을 거치게 되고, 이 과정이 끝나면 레이아웃을 렌더링 해달라고 Main Thread에 레이아웃 결과를 전달한다.
5. 화면을 렌더링하게 된다.
React Native Re Render 프로세스
최초 렌더링과 비슷하지만, JavaScript Bundle은 이미 최초실행을 통해 Load가 되어있는 상태이기 때문에 번들을 로드를 해줄 필요가 없으며 Diffing 작업부터 실행하게 된다.
Main Thread 와 JS Thread는 언어가 다른데, 데이터가 어떻게 오가는걸까?
이를 가능하게 해주는 것은 브릿지(Bridge) 이다. 브릿지는 JS와 Native가 서로 소통할 수 있도록 돕는 역할을 한다.
JavaScript ↔️ Bridge🌉 ↔️ Native (각각 JSON Object로 통신)
ex) 핸드폰의 배터리 잔량 확인?!
Native에 요청을 하고자 한다면 브릿지를 통해 Native 에 전달하게 되고, 결과값도 브릿지를 통해 받는다.
Bridge 사용의 단점?
이렇게 작은 값을 조회할 때도, JSON Object로 변환하여 데이터를 주고받아야 하기 때문에
변환에 많은 비용을 치루게 되어, 휴대폰 리소스 사용에 비교적 효율성이 떨어진다.
Reference
- 패스트캠퍼스 React Native 강의
- https://velog.io/@naamoonoo/리액트는-어떻게-작동할까-Diffing-3주차-회고
다음 글에서 Native Module 에 대해 알아보겠다.
'Study > React&ReactNative' 카테고리의 다른 글
| React Native Patch Package 사용하기(라이브러리 패키지 패치, 수정하기) (0) | 2022.12.05 |
|---|---|
| React Native Bottom Sheet 테두리 Radius 변경 (0) | 2022.08.03 |
| React Native Bottom Sheet 라이브러리 사용하기(+Backdrop 터치시 닫힘 추가) (14) | 2022.07.31 |
| React Native 버전과 TypeScript 동시에 다운그레이드하여 프로젝트 만들기 (2) | 2022.07.28 |
| [React Native] Mac M1 개발환경 세팅 (22.12.05수정) (0) | 2022.07.21 |
