[RN] React Native 실행 흐름(Workflow)에 대한 고민해보기..
안녕하세요. React Native를 즐겁게 공부하고 있습니다.
(RN의 한국어 자료가 많아지길 희망하며..)
기본적인 CRNA , React-Native 쉘 커멘드로
기본 프로젝트를 생성해서 iOS, android 샘플링을 아래 링크와 같이 해봤지만..
이 실행 흐름의 원리가 이해가 잘 안되었습니다.
그래서 Workflow 의 흐름에 대해 공부하고, 정리한 내용을 적어봅니다.
우선
React-Native를 알기 위해서는 React의 Virtual DOM에 대해서 알아야 된다고 하는 글을 읽었고..
그래서 React의 Workflow에 대해 먼저 알아보았습니다.
React의 workflow
HTML ➡️ Parsing ➡️ DOM Tree ➡️ Style (css ..) ➡️ Parsing ➡️ Render Tree ➡️ Attachment (synchronous) ➡️ Layout(reflow) ➡️ Painting
- DOM Tree : HTML을 파싱해서 DOM Tree의 생성
- Render Tree : 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱해서 새로운 Render Tree의 생성
- Attachment: 노드의 스타일을 처리하는 과정, 객체형태의 생성
- Layout : 좌표(위치)가 주어지는 과정
- Painting : 화면에 나타내는 작업
화면을 수정한다면?
DOM 을 수정한다면!!
수정한 부분의 모든 요소들의 스타일이 다시 계산해서 Rander Tree를 재생성하게하고 이후의 Layout과 Painting 과정을 진행할 것입니다.
이렇게 매번 DOM을 수정할때마다..
매번 연산해서 Painting을 하는 풀과정을 진행하는 것은 비효율이겠죠…
특히나 SPA(Single Page Application, 최초에 필요한 리소스를 모두 로드에서 이후에 재로드 없이 스크립트를 이용해서 사용자 서비스를 제공하죠~)로 된 페이지에서는 재로드 하지않고 많은 페이지들을 로드해서 DOM조작을 해서 처리하면..
이런 방식이면 매우 비효율적일 듯 합니다.
그래서 Virtual DOM 이라는 가상의 DOM을 두어서 View 변화가 있다면 실제 변화는 가상의 DOM에 적용시키고 최종적인 결과만 DOM에 적용시킵니다.
가상의 DOM에서는 필요한 곳만 계산하고 필요한 최사한의 변경사항만 랜더링 하기에 매우 효율적입니다.
이처럼 Virtual DOM은 효율적이기도 하고,
더불어 추상화 되어있어서 React-Native로 확장하여 다른 플렛폼까지 지원이 가능합니다.
React Native의 Workflow
DOM으로 랜더링하는 대신에 iOS의 경우는 Objc api를 호출하여 iOS 컴포넌트로 렌더링하여 처리합니다. android라면 java api를 호출하여 안드로이드 컴포턴트로 랜더링 하여 호출하겠죠.
RN 소스.js ➡️ Page Render ➡️ 리엑트 컴포넌트 DOM에 마운팅 ➡️ 브릿지 ➡️ 리엑트 컴포넌트 Rending (Objc api, java api .. ) ➡️ 해당 플랫폼의 Process
리엑트는 브라우저 DOM에 랜더링 하지만,
리엑트 네이티브는 Bridge(브릿지) 라는 개념을 도입해서 iOS, android 플렛폼으로 렌더링 합니다.
브릿지가 해당하는 플렛폼의 Native UI요소에 접근하는 인터페이스를 제공하기 때문에 가능한 것이지요.
브릿지에 의존적인 특징이 있습니다.
추후에 다른 플렛폼도 해당 브릿지 요소만 추가하면 다른 플렛폼도 확장이 쉽게 될 수 있겠지요.
공부단계라 내용은 다소 틀린 부분이 있을 수 있습니다.
즐거운 하루 되세요 :) 🙇
