Capstone#8. React Native 작동 원리에 대해 알아보자! ( 4가지의 Thread, Bridge, 상태관리가 이루어질 때 Thread)

 

 

 

일단 화면 개발에 앞서
리액트 네이티브가 어떻게 동작하는지, 각 파일의 의미 등등에 대해서
먼저 공부해 보면 좋을 것 같아요!!
그래야 이 리액트 네이티브를 좀 더 잘 이해하고 코드를 구현할 수 있으니까요!
 

 

<목차>

• Dom 이란?
• 가상 DOM 을 사용해서 렌더링을 하는 React Native
• Thread 란? 
• 리액트 네이티브의 4가지 Thread
• React Native 의 핵심 아키텍처 Bridge
• Javascript와 네이티브 코드 간의 브리지 통신
• React Native 에서 상태관리가 이루어질 때, Thread의 동작은?

 
가상 DOM이란 개념 이전에 
그냥 DOM은 뭘까요? 
 

DOM 이란?

 
 
Document Object Model 즉 한국어로 풀어 말하면 문서 객체 모델입니다.
웹 문서의 구조화된 표현!
웹 페이지와 스크립트 사이의 다리 역할을 하는 걸 말해요.
 

 
이렇게요!
각 언어마다 dom에 접근하는 방법이 다른데, js에서는 대표적으로 id를 선택자를 사용하는
document.getElementById("#id") 이런 메서드 등이 있습니다.
React에서는 useRef() 함수를 사용해 dom에 접근 가능해요!
 
 

 
dom은 html 문서 구조의 계층을 표현하는 객체인데요.
dom의 계층은 트리 자료구조로 구축이 되어있어요.
 
DOM은 화면에 수정사항을 반영해주기 위해 수정될 때마다 렌더링 시키게 되어있어요.
수정사항이 조금만 생겨도 DOM을 건드려 렌더링을 시켜야 하기 때문에 굉장히 비 효율적이라고 볼 수 있죠.
문자 하나를 수정하는 것이 10번 반복되면
전체를 10번 렌더링하니까 얼마나 비효율적인 코드가 될까요!
 
이런 문제를 해결하기 위해 React는 수정사항들을 가상으로 반영시키고 한 번에 처리하는데,
여기서 처리하는 곳을 가상 DOM이라고 합니다.
 
 

가상 DOM 을 사용해서 렌더링을 하는 React Native

 
 
리액트에서 가상 DOM은 화면에 어떤 모습이어야 하는지
개발자가 작성한 내용과 실제 화면에 렌더링 되는 것 사이에 존재하는 레이어를 말합니다!
 
사용자의 ui를 렌더링 하기 위해서 개발자는 반드시 브라우저의 DOM을 수정해야 합니다.
하지만 위에서 말 한 것처럼 과도한 DOM을 수정하는 것은 심각한 성능 저하를 유발하겠죠??
 
리액트는 페이지의 변화를 바로 렌더링 하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고, 
필요한 최소한의 변경사항만 렌더링을 합니다.
 

 
이 사진처럼요!
state 를 변경해서 차이점을 계산하고, 그 이후에 실제 브라우저의 dom을 렌더링 하는 방식이죠

 

Thread 란? 

 

 

실행되는 프로세스 내에서 실제로 작업을 실행하는 주체로, 가장 작은 작업의 단위로 볼 수 있어요.

명령어를 실행하여 처리하는 주체 입니다.

 

보통 프로세스 하나당 하나의 스레드를 가지고 있지만, 

환경에 따라 두 개 이상의 스레드를 가질 수 있으며, 이를 '멀티 스레드'라고 합니다!

 

 

리액트 네이티브의 4가지 Thread

 

 

1. Main Thread 또는 UI Thread

 

Native영역에 레이아웃을 그려주는 역할을 합니다.

 

2. React Native는 js 스레드

 

개발자가 작성한 Javascript 가 실행되는 곳으로

이는 ui를 조작하고 비즈니스 로직 처리를 담당합니다.

또한 '싱글 스레드'로 동작하며, 비동기 작업을 처리할 수 있어요!

 

3. Native 스레드

 

Native module을 다룰 때 사용하게 되는 Thread입니다.

js 스레드 외에도 Native 스레드를 사용하여 ui컴포넌트를 렌더링 합니다.

ui 이벤트 처리, 애니메이션, 네트워크 요청 등과 같은 네이티브 기능을 담당해요.

 

4. Shadow Thread

 

virtual Dom으로부터 새로운 Layout으로 변환하도록 계산해 주는 역할의 스레드입니다.

 

 

React Native의 핵심 아키텍처

 

 

🌉 브릿지 (bridge)

 

React Native Bridge는 위에서 설명한 js 스레드와 Native스레드 사이의 통신을 담당합니다.

두 가지의 언어가 다르기 때문에 데이터를 통신할 다리역할이 필요한 거랍니다!

 

JavaScript ↔️ Bridge🌉 ↔️ Native (각각 json Object로 통신해요!)

 

렌더링 프로세스 

 

React Componets : javascript로 작성되었으며 UI를 설명합니다.

Virtual Dom : React Native는 Virtual DOM에 대한 변경사항을 조정하여 업데이틑 최적화합니다.

 

네이티브 모듈

 

파일 저장, 카메라 액세스 또는 위지 정보 같은 장치별 기능을 위한 내장 모듈입니다.

개발자는 확장된 기능을 위해 사용자 정의 기본 모듈을 만들 수 있어요!

 

 

JavaScript와 네이티브 간의 브리지 통신

 

 

브리지 작동 방식

위에서 말한 Javascript가 네이티브 코드와 독립적으로도 실행이 되지만 필요한 경우 통신도 할 수 있어요! 

브릿지를 통해..

 

비동기 통신

Bridge는 Javascript 스레드가 잠기는 것을 방지하기 위해 비차단 비동기 모델을 사용하는데,

네이티브 스레드는 앱의 응답성에 영향을 주지 않고 작업을 병렬로 수행할 수 있습니다.

 

직렬화 및 역직렬화

데이터는 Bridge를 통한 전성을 위해 json과 유사한 구조로 변환되어 전송됩니다.

 

 

React Native에서 상태관리가 이루어질 때, Thread의 동작은?

 

 

그렇게면 React Native에서 상태관리가 이루어질 때, Thread의 동작은 어떻게 될까요?

 

상태 관리와 관련하여 Thread가 동작하는 방식은 Javascript와 네이티브 간의 상호작용이 핵심입니다.

 

 

1. JavaScript 측 상태변화

 

React, Redux 같은 상태 관리 라이브러리 동작은 대부분 Javascript Thread에서 이루어집니다.

React Native의 UI는 React 컴포넌트로 작성되고, React의 상태관리 시스템을 통해 상태 변화가 발생해요.

상태 업데이트 -> 컴포넌트 렌더링 -> Virtual DOM 비교 과정이 여기서 수행이 됩니다!

 

2. Bridge를 통해 네이티브로 전달

 

JavaScript와 네이티브는 서로 다른 환경에서 실행되므로, React Native는 상태변화나 UI변경 요청을 직렬화하여 네이티브로 전달해요.

 

3. 네이티브 모듈에서 UI변경

 

UI 변경 요청은 네이티브 모듈(즉, 네이티브 코드 기반의 UI컴포넌트들)에서 실행됩니다.

 

4. UI Thread에서 렌더링

 

UI 업데이트와 렌더링 작업은 네이티브 측에서 UI Thread를 통해 처리됩니다.