React Native는 Facebook(현 Meta)이 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. JavaScript로 작성한 코드 하나로 iOS와 Android 앱을 동시에 만들 수 있는 혁신적인 시스템인데, 이것이 어떻게 가능한지 그 내부 구조를 상세히 살펴보겠습니다.

기본 개념: React Native가 작동하는 원리

React Native를 이해하려면 먼저 "번역"의 개념을 이해해야 합니다. JavaScript로 작성한 코드가 어떻게 iOS의 Swift나 Android의 Kotlin으로 작성한 네이티브 앱처럼 작동할 수 있을까요? 비유하자면, React Native는 통역사 역할을 합니다. 당신이 한국어(JavaScript)로 말하면, 통역사(React Native)가 이를 영어(iOS)나 중국어(Android)로 실시간 번역해주는 것과 같습니다.

이 과정에서 React Native는 2018년부터 개발된 Fabric이라는 새로운 렌더링 시스템을 사용합니다. Fabric은 2021년부터 Facebook 앱에 실제로 적용되어 검증된 기술로, 기존 시스템의 한계를 극복한 차세대 아키텍처입니다.

Fabric 렌더링 시스템의 3단계 프로세스

Fabric의 렌더링 과정은 마치 건축 설계와 시공 과정과 비슷합니다. 설계도를 그리고(Render), 검토하고(Commit), 실제로 건설하는(Mount) 3단계로 이루어집니다.

1단계: Render (렌더) - 설계도 그리기

이 단계에서 React는 JavaScript로 작성된 코드를 실행하여 React Element Tree라는 설계도를 만듭니다. 이는 화면에 무엇이 어떻게 표시되어야 하는지 설명하는 JavaScript 객체들의 트리 구조입니다.

예를 들어, 버튼 하나를 만든다고 생각해보세요. React는 "여기에 파란색 버튼이 있고, 텍스트는 '확인'이며, 클릭하면 이런 동작을 한다"는 정보를 담은 설계도를 만듭니다. 그런 다음 이 JavaScript 설계도는 즉시 C++로 작성된 React Shadow Tree로 변환됩니다.

왜 C++를 사용할까요? C++는 iOS와 Android 모두에서 실행 가능한 언어이기 때문입니다. 한 번만 구현하면 양쪽 플랫폼에서 모두 사용할 수 있어 효율적입니다.

2단계: Commit (커밋) - 설계 검토 및 확정

건축에서 설계도를 확정하기 전에 구조 계산을 하듯이, 이 단계에서는 두 가지 중요한 작업이 일어납니다:

레이아웃 계산: Yoga라는 레이아웃 엔진이 각 요소의 정확한 위치와 크기를 계산합니다. 예를 들어, "화면 중앙에 버튼 배치"라는 명령을 받으면, Yoga는 화면 크기를 고려하여 정확한 픽셀 좌표를 계산합니다. 이는 마치 인테리어 디자이너가 가구 배치를 밀리미터 단위로 계산하는 것과 같습니다.

트리 승격: 계산이 완료된 새로운 Shadow Tree가 "다음에 화면에 표시될 트리"로 지정됩니다. 아직 화면에는 표시되지 않지만, 모든 준비가 완료된 상태입니다.

3단계: Mount (마운트) - 실제 화면에 그리기

이제 실제로 화면에 표시하는 단계입니다. 이 과정은 세 가지 세부 단계로 나뉩니다:

1. 트리 비교(Diffing): 현재 화면과 새로 그릴 화면의 차이점을 찾습니다. 전체를 다시 그리는 대신 변경된 부분만 찾아내는 것이 핵심입니다. 마치 '틀린 그림 찾기'를 하듯이 정확히 어느 부분이 바뀌었는지 파악합니다.
2. 트리 교체: 새로운 트리를 현재 트리로 원자적(atomic)으로 교체합니다. "원자적"이란 중간 상태 없이 한 번에 완전히 바뀐다는 의미로, 사용자가 화면이 깜빡이거나 중간 상태를 보지 못하게 합니다.
3. 뷰 마운팅: 실제로 iOS의 UIView나 Android의 ViewGroup 같은 네이티브 컴포넌트를 생성하거나 수정합니다. 이것이 실제로 사용자가 보는 화면입니다.

View Flattening: 효율성을 위한 최적화