들어가며
브라우저의 렌더링 과정을 익히다가 브라우저의 렌더링 과정과 React Native를 이용해서 개발한 어플리케이션 같은 경우는 어떤 렌더링 과정을 거치게 될지 궁금하게 되어 작성하게되었습니다.
이 글은 웹 브라우저 React Native 애플리케이션의 렌더링 과정을 비교하여 설명합니다.
두 플랫폼의 작동 방식 차이를 이해하면 더 효율적인 개발과 최적화에 도움이 될 것입니다.
웹 브라우저 렌더링 과정
1. HTML 파싱 및 DOM 트리 생성
브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다. DOM은 웹 페이지의 객체 기반 표현으로, 각 HTML 요소를 노드로 표현합니다.
2. CSS 파싱 및 CSSOM 트리 생성
브라우저는 CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM은 DOM 요소에 적용될 모든 스타일 정보를 포함합니다.
3. 렌더 트리 생성
DOM 트리와 CSSOM 트리가 결합되어 렌더 트리를 형성합니다. 렌더 트리는 화면에 표시될 요소만 포함하며, display: none과 같이 화면에 표시되지 않는 요소는 제외됩니다.
4. 레이아웃(리플로우) 계산
렌더 트리의 각 노드에 대해 화면 상의 정확한 위치와 크기를 계산하는 과정입니다. 이 과정은 뷰포트 크기, 요소의 박스 모델, 상대적 위치 지정 등 다양한 요소를 고려합니다.
5. 페인팅
마지막으로, 레이아웃 정보를 사용하여 화면의 실제 픽셀을 채우는 과정입니다. 텍스트, 색상, 이미지, 그림자 등 모든 시각적 요소가 이 단계에서 그려집니다.
6. 합성
현대의 브라우저는 성능 향상을 위해 페이지를 여러 레이어로 나누고, 이를 개별적으로 그린 다음 GPU에서 합성합니다. 이를 통해 전체 페이지를 다시 그리지 않고도 애니메이션이나 스크롤과 같은 작업을 더 효율적으로 처리할 수 있습니다.
React Native 렌더링 과정
React Native는 JavaScript로 작성된 코드를 각 플랫폼(iOS, Android)의 네이티브 UI 컴포넌트로 변환하는 방식으로 작동합니다. 이 렌더링 과정은 웹 브라우저와는 다소 다른 접근 방식을 취합니다.
1. JavaScript 코드 실행
React Native 앱의 JavaScript 코드는 별도의 JavaScript 스레드에서 실행됩니다. React Native는 기본적으로 JavaScriptCore(iOS) 또는 Hermes(최신 버전의 기본 엔진)를 사용하여 JavaScript 코드를 실행합니다.
2. React 가상 DOM 업데이트
React 코드가 실행되면 가상 DOM이 생성되고 업데이트됩니다. 이 과정은 웹에서의 React와 유사하지만, 실제 DOM 대신 React Native의 가상 DOM 구조를 사용합니다.
3. 네이티브 브릿지 통신
가상 DOM의 변경 사항은 비동기적으로 "브릿지"를 통해 네이티브 스레드로 전달됩니다. 브릿지는 JavaScript 코드와 네이티브 코드 사이의 통신 채널 역할을 합니다.
4. 섀도우 스레드에서 레이아웃 계산
React Native는 Yoga라는 Facebook의 크로스 플랫폼 레이아웃 엔진을 사용합니다. Yoga는 CSS Flexbox와 유사한 레이아웃 시스템을 구현하여, 섀도우 스레드에서 UI 컴포넌트의 크기와 위치를 계산합니다.
5. 네이티브 UI 컴포넌트 렌더링
계산된 레이아웃 정보는 메인(UI) 스레드로 전달되어, 네이티브 UI 컴포넌트(iOS의 UIViews 또는 Android의 Views)로 변환됩니다. 이 과정은 각 플랫폼의 네이티브 렌더링 시스템을 사용합니다.
6. 화면 업데이트
마지막으로, 네이티브 UI 컴포넌트가 화면에 표시됩니다. 이후의 업데이트도 동일한 과정을 통해 이루어집니다.
두 렌더링 과정의 주요 차이점
1. 스레드 구조
- 웹 브라우저: 대부분의 렌더링 작업이 메인 스레드(UI 스레드)에서 이루어집니다. 이로 인해 복잡한 JavaScript 작업이 UI를 차단할 수 있습니다.
- React Native: 세 개의 주요 스레드를 사용합니다:
- JavaScript 스레드: React/비즈니스 로직 실행
- 섀도우 스레드: 레이아웃 계산
- 메인/UI 스레드: 네이티브 UI 렌더링
2. 레이아웃 시스템
- 웹 브라우저: HTML과 CSS를 사용하여 레이아웃을 계산합니다. 다양한 레이아웃 모드(Block, Inline, Flexbox, Grid 등)를 지원합니다.
- React Native: Yoga 엔진을 사용하여 Flexbox 기반 레이아웃을 계산합니다. 웹의 CSS와 유사하지만 일부 속성은 지원하지 않습니다.
3. 플랫폼 특화성
- 웹 브라우저: 모든 브라우저에서 동일한 HTML, CSS, JavaScript를 사용하지만, 브라우저 간 렌더링 차이가 있을 수 있습니다.
- React Native: 동일한 JavaScript 코드가 각 플랫폼(iOS/Android)에서 다른 네이티브 UI 컴포넌트로 변환됩니다.
