React native 구동 방식

React native 구동 방식

어떠한 라이브러리 혹은 프레임워크를 제대로 사용하기 위해 해당 라이브러리가 어떻게 작동하는지에 대해 알아보는 것이 중요하다고 생각한다. 이에 react native가 어떻게 구동하고 있는지 파악하기 위해 이 글을 써내려가겠다.

리액트 네이티브의 구 아키텍처와 새로운 아키텍처에 대해 살펴볼것이다.

구 아키텍처

출처: https://t.co/wDaXRvLtlA?amp=1

우선, 위의 사진으로 간단한 흐름을 파악해보자

1. 유저가 버튼을 클릭

2. 클릭에 의한 이벤트는 native threads에서 브릿지를 통해 js thread를 실행.

3. 해당 결과 값을 브릿지를 통해 다시 native threads에 전달하여 유저에게 해당 이벤트에 맞게 화면을 보여준다.

엄청 간단하게 흐름을 보면 이렇다.

이제 자세하게 파악해보자 ( 설명 후 위의 간단한 단계를 디테일하게 풀어서 다시 단계를 적어볼 예정이다. )

React native 번들

개발자가 작성한 코드를 빌드를 하면서 metro (웹펙과 같은 번들러)로 스크립트를 묶어준다. 이 코드가 각각의 플랫폼에 넘겨지게 되고, 이를 실행할 수 있도록 bridge가 script와 native 상호 소통하도록 도와준다.

React native App Thread

1. UI Thread : 메인 쓰레드. 기본 안드로이드 또는 ios의 UI 렌더링에 사용된다.

2. Shadow Thread : 레이아웃이 계산되는 쓰레드. faceboo의 자체 레이아웃 엔진인 Yoga를 사용하여 flexbox 레이아웃을 계산하고 UI 쓰레드로 다시 보낸다.

3. Base Thread : 핸들 사용자 인터페이스에 대한 책임. UI를 업데이트하거나 기본 기능에 액세스해야 할 때마다 JS 스레드와 통신한다.

3-1) 네이티브 UI

3-2) 네이티브 모듈

참고자료 :

https://chifuyu.tistory.com/23

https://velog.io/@koreanhole/React-Native%EC%9D%98-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC

https://medium.com/react-native-seoul/%EC%83%88%EB%A1%9C%EC%9A%B4-react-native-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EC%84%A4%EB%AA%85-a80a60ec04d7

https://ichi.pro/ko/2020-nyeon-react-native-ui-jae-akitegcheo-171215219685676

from http://sangwonny.tistory.com/44 by ccl(A) rewrite - 2021-12-25 19:01:33