02. 리엑트 네이티브의 동작 방식 - 브릿지, 가상돔

브릿지

 

출처 : https://brocoders.com/blog/react-native-interview-questions/

  리엑트 네이티브는 JavaScript로 개발하는데 어떻게 Native 코드로 동작할까? 이 궁금증을 해소하기 위해서는 브릿지의 개념을 알아야 합니다. 그리고 그 브릿지와 동작하는 Thread 개념을 이해해야 합니다.

 

  브릿지는 JavaScript 코드를 이용해 네이티브 계층과 통신하는 역할을 합니다. 브릿지는 JavaScript 스레드 정보를 받아 네이티브에 전달합니다. JavasScript 스레드는 JavaScript 코드가 실행되는 장소이며 보통 리엑트 코드로 구성되어 있습니다. 네이티브를 담당하는 Main 스레드가 있고 레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 Shadow 스레드가 있습니다. 또한, 네이티브 모듈이 있는데 각 모듈에 자체 스레드가 있습니다.

 

Main Thread & Shadow Thread

 - UI Thread라고 불리기도 하며 네이티브 안드로이드와 IOS UI 랜더링에 사용됩니다. 

 - 예를 들면 안드로이드에서는 measure/layout/draw 작업을 할 때 사용됩니다.

 

Native Modules Thread 

 - 네이티브 API를 사용할 때 사용됩니다.

 - 각 모듈마다 스레드를 가지고 있습니다.

 

JS Thread

  - 애플리케이션의 JavaScript 코드, API 호출, 터치 이벤트 등이 실행되는 스레드입니다.

  - 네이티브 뷰에 대한 업데이트는 일괄 처리되고 JS 스레드의 각 이벤트 루프 끝에서 네이티브 측으로 전송됩니다.

  - 성능 유지를 위해 랜더링 시간에 맞춰 업데이트 신호를 보냅니다.

  - ios 경우 60 frame을 위해 16.67ms 마다 신호를 보내기 때문에 16.67ms 보다 길어지는 동작의 경우 느려 보임.

 

가상돔

출처 :  https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

 리엑트 네이티브의 동작 방식을 이해하려면 데이터가 변할 경우 자동으로 화면을 다시 그리는 리엑트의 가상 DOM 개념을 이해해야 합니다. DOM은 우리가 바라보는 화면이라고 이해하면 됩니다. 화면에 표시되는 DOM이 있는데 React에서는 이 DOM을 바로 업데이트하지 않고 화면에 보이지 않는 가상 DOM을 만들어 실제 DOM과 비교하는 역할로 관리하게 됩니다.

 

  그림에서 보는 것 같이 가상돔이 생성되고 만약, 데이터가 변경되었을 때 우선 가상 돔에 업데이트하게 되고 이를 실제 DOM과 비교하여 차이점을 계산한 뒤에 차이점에 대한 부분을 전달하여 실제 돔에 반영합니다.

 

  이때, 가상 돔이 변경될 때마다 변경 사항을 전달하지 않고 일정 시간 동안 계산 한 뒤 한 번에 보내게 됩니다.

 

리엑트 네이티브 동작 방식

 

1. 앱이 실행되면 Main 스레드가 실행되고 JS bundles를 로딩합니다.

2. JS 번들 로딩이 완료되면 Main 스레드는 JS 스레드로 보냅니다.

   JS 스레드가 무거운 작업을 진행하더라도 Main 스레드는 문제가 발생하지 않기 때문입니다.

3. React가 랜더링을 시작할 때 Reconciler가 "dffing"을 시작하고 새로운 가상 돔(Virtual Dom)을 생성한 뒤 변경사항을 다른 스레드 (Shadow Thread)로 전달합니다. 

4. Shadow Thread가 layout을 계산 한 뒤 layout의 parameter / object를 Main Thread로 보냅니다.

5. Main Thread는 shadow thread가 보낸 레이아웃을 화면에 렌더링 합니다.

 

[참고 자료]

https://brocoders.com/blog/react-native-interview-questions/

https://www.codementor.io/@saketkumar95/how-react-native-works-mhjo4k6f3

처음 배우는 리액트 네이티브

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."