React Native의 렌더링 방식 이해하기
Table of Contents
기존 React의 렌더링 방식과의 차이점
React는 컴포넌트 기반의 선언형 UI 라이브러리로, 브라우저에서 DOM을 조작하는 방식으로 화면을 렌더링한다. 하지만 React Native는 웹이 아니라 모바일 애플리케이션을 위한 프레임워크다. 따라서 화면을 구성하는 방식이 다르다.
1. React (웹)에서의 렌더링
웹 환경에서는 React가 가상 DOM(Virtual DOM)을 이용하여 변경된 부분만 실제 DOM에 반영하는 방식으로 성능을 최적화한다.
React는 setCount가 호출될 때 가상 DOM에서 변경된 부분을 감지하고, 브라우저의 실제 DOM을 업데이트한다.
2. React Native에서의 렌더링
React Native는 웹이 아니라 네이티브 UI를 조작해야 한다. 따라서 브라우저의 DOM을 직접 조작하는 것이 아니라, 네이티브 컴포넌트와 브릿지를 통해 UI를 업데이트하는 방식을 사용한다.
React Native에서는 div, p, button과 같은 웹 요소를 사용하지 않고, View, Text, Button과 같은 네이티브 컴포넌트를 사용한다.
React Native의 렌더링 과정
React Native는 다음과 같은 과정으로 렌더링을 수행한다:
1. JavaScript에서 UI 선언
컴포넌트를 정의하고, 상태(state)가 변경될 때마다 React의 Reconciliation 과정을 거쳐 UI를 갱신한다.
2. Shadow Tree 생성 (Bridge를 통한 통신)
React Native는 가상 DOM 대신 Shadow Tree를 사용하여 변경 사항을 추적한다. 이 정보는 브릿지를 통해 네이티브 코드로 전달된다.
3. 네이티브 UI 업데이트
네이티브 측에서는 전달받은 정보를 기반으로 실제 UI 요소(View, Text 등)를 업데이트한다.
Fabric: 새로운 렌더링 아키텍처
기존 React Native는 브릿지를 통해 JavaScript와 네이티브 간 통신을 했지만, 이 방식은 성능 저하를 유발하는 주요 원인이었다. 이를 해결하기 위해 Fabric이 도입되었다.
Fabric의 주요 특징
- 동기 렌더링(Synchronous Rendering) 지원 → UI 업데이트가 더욱 빠르고 즉각적으로 반영됨
- JSI(JavaScript Interface) 활용 → 브릿지를 거치지 않고 네이티브 모듈과 직접 통신 가능
- Shadow Tree 최적화 → UI 업데이트 과정이 단순화됨
- 향상된 멀티스레딩 지원 → UI 스레드에서 불필요한 작업을 줄이고 성능을 개선함
Fabric이 적용된 React Native의 렌더링 과정
- React 컴포넌트가 변경됨
- Shadow Tree가 Fabric을 통해 네이티브와 직접 통신
- UI 업데이트가 동기적으로 적용됨
Fabric을 사용하면 브릿지를 통한 비효율적인 통신이 제거되면서 React Native의 성능이 대폭 향상된다.
React Native에서의 성능 최적화
React Native의 렌더링 방식은 웹과 다르기 때문에, 최적화 기법도 차이가 있다.
1. 불필요한 리렌더링 방지 (React.memo, useMemo)
이처럼 React.memo를 활용하면 동일한 props가 전달될 경우 리렌더링을 방지할 수 있다.
2. useCallback으로 함수 재생성 방지
이렇게 하면 불필요한 함수 재생성을 막아 렌더링 성능을 높일 수 있다.
3. FlatList와 VirtualizedList 사용
대량의 리스트를 렌더링할 때 FlatList를 사용하면 메모리 사용을 최적화할 수 있다.
결론
React Native는 기존 React와 비슷한 방식으로 UI를 선언하지만, 실제 렌더링 과정은 네이티브 UI와 브릿지를 통해 이루어진다. 그리고 새로운 아키텍처인 Fabric이 도입되면서 렌더링 성능이 더욱 향상되었다. 따라서 React 웹 개발자라 하더라도 네이티브 UI 업데이트 방식과 최적화 기법을 이해하는 것이 중요하다.