[React Native] 리액트네이티브 원리 (Rendering lifecycle)

어떻게 동작 할까?

먼저 리액트의 특징 중 하나인 virtual DOM에 대해서 알아야 한다. 이는 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 랜더링 되는것 사이에 존재하는 레이어에 해당한다. 리액트는 페이지의 변화를 바로 렌더링 하지 않고 먼저 메모리에 존재하는 가상 dom에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링 한다.

출처 : https://programmingwithmosh.com/react/react-virtual-dom-explained/

Virtual DOM

대부분의 개발자 분들은 성능 최적화가 주된 역할이라고 생각하지만 추사화라는 측면에서 더 큰 잠재력이 있다. 마약 리액트가 브라우저의 dom이 아닌 다른 타겟으로 렌더링하면 타겟과 상관 없이 리액트는 앱이 어떻게 보여야 하는지 알고 있따. 브라우저의 dom으로 렌더링 하는 대신에 리액트 네이티브는 objective-c api를 호출하여 IOS컴포넌트로 렌더링하고, 자바 api를 호출하여 안드로이드 컴포넌트로 렌더링한다. 웹 기반의 화면으로 최종 렌더링 되는 대부분의 크로스 플래솦ㅁ 앱 개발 방법들과 구별되는 리액트 네이티브의 특징이다.

Rendering lifecycle

브라우저에서 리액트가 동작할 때, 렌더링 라이프 사이클은 여러분이 작성한 리액트 컴포넌트를 마운팅하면서 시작한다.

<리액트의 컴포넌트 마운팅 과정>
그 후 리액트는 필요에 따라 컴포넌트를 여러번 렌더링 하게 된다.

렌더링 단계에 필요한 HTML 마크업은 리액트 컴포넌트의 render 메서드를 통해 리액트에 전달 됩니다. 리액트 네이티브에서도 라이프 사이클은 웹에서의 렌더링과 같지만 브릿지가 있기때문에 자바스크립트에서 발생하는 호출을 대상 플랫폼의 API,UI element에 연결합니다
ex) iOS경우 object-c code,android의 경우 java code를 호출합니다. RN은 메인 UI스레드에서 동작하지 안힉 땜누에 사용자 경험에 영항을 주지 않고 비동기적으로 실행할 수 있습니다.

VIEW

리액트와 리액트 네이티브의 view로 렌더링 되는 차이점이 있습니다.

다른 컴포넌트들은 특정 플랫폼에서만 동작한다. 예를들어 는 ios표준날짜 선택기를 렌더링한다.