리액트에서의 렌더링 단계는 렌더 단계(Render Phase), 커밋 단계(Commit Phase)로 나뉜다.
렌더 단계에서는 리액트 컴포넌트의 변경된 상태를 계산하고, 커밋 단계에서는 렌더 단계에서 수집한 변경 사항을 기반으로 실제 DOM에 마운트하는 과정을 거치게 된다.
그렇다면 RN에서도 동일한 과정을 통해서 최종적으로 화면에 Mount 되는 것일까?
결론부터 말하자면 그렇지 않다. React만 사용해보고 RN을 사용해보지 않은 개발자라면 이에 대해서 충분히 헷갈릴 수 있을 것이다.
우선 RN에는 브라우저에 존재하는 API인 ‘DOM’이 존재하지 않다. 따라서 RN에서는 html 태그를 사용할 수 없고, document 객체에도 접근할 수 없다.
그렇다면 이 사실을 기반으로 렌더링 단계에서의 공통점, 차이점을 파악해보자.
1. Render Phase - 렌더 단계
렌더링 단계의 첫번째 단계인 렌더 단계에서는 RN에서도 동일하게 자바스크립트를 통해 React Element Tree를 그린다는 공통점이 있다.
차이점은 RN에서는 렌더 단계에서 “React Shadow Tree도 함께 생성한다.”는 점이다.
쉽게 말해서, ‘React’의 역할은 동일하다. 하지만 RN에서는 추가적으로 RN의 렌더러인 Fabric 렌더러가 React Shadow Tree를 함께 생성한다는 점이 다르다.
2. Commit Phase - 커밋 단계
리액트에서는 커밋 단계를 통해 최종적으로 실제 DOM에 변경된 상태가 반영된 화면을 보여준다.
즉, 리액트에서 렌더 단계는 실제 브라우저 화면에 반영하기 위한 렌더링의 ‘최종 단계’이다.
하지만 RN에서의 커밋 단계는 아래와 같이 좀 더 세분화되어 있으며, 렌더링의 ‘최종 단계’가 아니다.
- 레이아웃 계산 (Layout Calculation)
- 트리 승격 (Tree Promotion)
RN에서는 이 단계에서 RN의 크로스 플랫폼 엔진인 Yoga 엔진을 호출하여 각 React Shadow Node의 레이아웃을 계산한다. 그리고 계산된 Shadow Tree 기반으로 위치와 크기를 결정한다.
정리하자면, 리액트에서의 커밋 단계는 실제 화면에 반영될 렌더링의 ‘최종 단계’이며, RN에서는 최종 단계가 아니다.
3. Mount
리액트는 이미 위 Commit Phase에서 브라우저에 상태 업데이트로 인한 변경 사항 등이 반영됐을 것이다.
RN에서는 이제 ‘최종 단계’인 Mount 과정을 통해 실제 네이티브 뷰에 변경사항을 반영한다.
Mount 단계에서는 레이아웃 정보가 포함된 React Shadow Tree를 실제 화면에 보이는 네이티브 View 트리로 변환한다. 이 단계가 끝나면 화면에 실제 픽셀이 그려진다.
이렇게 React, React Native의 렌더링 프로세스에 대해서 비교해봤다.
RN으로 개발하면서 리액트와 동일하게 JSX 문법을 사용하지만, 여러가지로 다른 점이 은근 많다고 느꼈다.
렌더링 프로세스 외에도 RN에서는 UI(main) 스레드, Background 스레드, JS 스레드 총 세가지 종류의 스레드를 사용한다는 점도 알 수 있었다.
웹 개발 경험만 있을 때에는 이러한 차이점을 알지 못했는데, RN을 통해 모바일 앱을 개발하면서 이러한 차이점에 대해서 알 수 있었고, 앞으로도 새로운 기술을 사용할 때는 기존에 사용하던 기술과의 공통점, 차이점을 파악하면서 각 기술에 대해 더 잘 이해할 수 있도록 하면 좋을 거 같다.
