[Mobile] React Native 핵심 개념과 구조, 동작 원리

React Native(RN)는 하나의 JavaScript 코드베이스로 iOS와 Android 네이티브 앱을 동시에 개발할 수 있게 해주는 프레임워크다. 단순한 “하이브리드”가 아니라, 네이티브 UI를 직접 렌더링한다는 점에서 웹뷰 기반 접근과 구조적으로 다르다.

이 글에서는 React Native의 핵심 개념, 내부 구조, 런타임 동작 원리, 브리지 아키텍처, **신규 아키텍처(Fabric / TurboModules)**까지 전체 흐름을 개발자 관점에서 정리한다.

---

React Native의 본질

React Native는 다음 조합으로 구성된다.

• React (컴포넌트 모델 + 선언형 UI)
• JavaScript 런타임
• Native Rendering Layer
• Bridge (JS ↔ Native 통신 계층)

핵심 철학:

“Write once, render natively”

HTML을 그리는 것이 아니라
iOS는 UIKit, Android는 View 시스템으로 직접 렌더링한다.

즉:

React Native ≠ WebView
React Native = Native UI + JS Logic

---

기본 구조 개요

React Native 앱은 크게 3개 영역으로 나뉜다.

JS Layer

• React 코드 실행
• 비즈니스 로직
• 상태 관리
• 컴포넌트 트리 생성

Bridge Layer

• JS ↔ Native 통신
• 메시지 기반
• 직렬화 데이터 전달

Native Layer

• 실제 UI 렌더링
• OS API 호출
• 네이티브 모듈 실행

구조 요약:

React Component
→ Virtual Tree 생성
→ Bridge 메시지
→ Native View 생성
→ 실제 UI 표시

---

React Native 렌더링 흐름

RN의 렌더링 과정은 React와 동일한 선언형 모델을 따른다.

단계별 흐름

1단계 — 상태 변경

state / props 변경

 

2단계 — Virtual Tree 생성

React가 새로운 컴포넌트 트리를 계산

 

3단계 — Diff 계산

이전 트리와 비교하여 변경점 추출

 

4단계 — Shadow Tree 생성

레이아웃 계산용 트리 생성 (Yoga 엔진 사용)

 

5단계 — Bridge 전송

변경사항을 Native로 전달

 

6단계 — Native UI 업데이트

실제 네이티브 뷰 반영

---

스레드 구조 이해

React Native는 멀티 스레드 협업 구조다.

JS Thread

• JS 코드 실행
• 상태 계산
• 렌더 트리 생성

UI Thread

• 네이티브 UI 렌더링
• layout / draw

Native Module Thread

• 네이티브 API 실행
• IO / SDK 작업

핵심 포인트:

JS Thread가 막히면 UI 반응도 느려진다

그래서 무거운 계산은:

• 네이티브 모듈로 이동
• worker 구조 활용
• 비동기 분리

---

Bridge 아키텍처 원리

기존 RN의 핵심 통신 구조는 Bridge다.

동작 방식

• 비동기 메시지 큐 기반
• JSON 직렬화
• batch 전송
• 양방향 통신

JS → serialize → message queue → Native
Native → serialize → message queue → JS

장점

• 플랫폼 독립성
• 구조 단순
• 확장 가능

단점

• 직렬화 비용
• 호출 지연
• 대량 메시지 병목
• 고빈도 UI 이벤트에 취약

예시 병목 케이스:

• 스크롤 이벤트 연속 발생
• 애니메이션 상태 전달
• 대용량 데이터 전송

---

Native Module 연동 구조

React Native는 네이티브 기능을 직접 확장할 수 있다.

Native Module이란

JS에서 호출 가능한 네이티브 코드 래퍼

iOS

• Swift / Objective-C
• RCTBridgeModule 구현

Android

• Kotlin / Java
• ReactContextBaseJavaModule 구현

JS 사용 예:

NativeModules.CameraModule.takePhoto()

---

레이아웃 엔진 — Yoga

React Native는 Yoga라는 레이아웃 엔진을 사용한다.

특징:

• Flexbox 기반
• 크로스 플랫폼
• 빠른 계산
• Shadow Tree 기반 레이아웃

CSS Flexbox와 거의 동일한 개념으로 동작한다.

---

React Native 성능 이슈의 근본 원인

RN 성능 문제는 보통 아래에서 발생한다.

JS thread blocking

• 무거운 계산
• 대량 루프
• 동기 처리

Bridge 과부하

• 잦은 네이티브 호출
• 대용량 데이터 전송

Re-render 폭발

• 상태 구조 설계 실패
• memoization 부족
• selector 비최적화

---

New Architecture — TurboModules

TurboModules는 브리지를 대체하는 구조다.

핵심 변화

• JSI 기반 직접 바인딩
• 브리지 제거
• lazy loading
• 동기 호출 가능
• 타입 안전

결과:

JS → Native direct call

오버헤드 감소.

---

New Architecture — Fabric Renderer

Fabric은 새로운 렌더링 시스템이다.

개선점

• concurrent rendering
• UI 업데이트 효율 향상
• shadow tree 개선
• layout 동기화 개선
• frame drop 감소

특히:

대형 리스트 / 복잡 UI / 애니메이션에 유리

---

상태관리 구조

React Native에서 상태는 보통 3가지로 나눈다.

UI State

• 로컬 상태
• 입력값
• 화면 제어

App State

• 전역 상태
• 사용자 정보
• 설정

Server State

• API 데이터
• 캐싱 필요
• 동기화 문제 존재

도구 선택:

• Redux → 대형 앱
• Recoil → 세밀 상태
• Context → 단순 전파
• React Query → 서버 상태

---

RN의 장단점

장점

• 크로스 플랫폼
• 네이티브 UI
• 코드 재사용
• 빠른 개발 속도
• JS 생태계 활용

단점

• 브리지 병목
• 복잡 애니메이션 제한
• 네이티브 의존성
• 디버깅 복잡
• 성능 튜닝 필요

---

리드 개발자 관점 핵심 이해 포인트

리드급에서 중요한 건 이 4가지다:

1️⃣ 브리지 병목 구조 이해
2️⃣ 스레드 모델 이해
3️⃣ 렌더링 파이프라인 이해
4️⃣ 상태 분리 전략

면접에서도 이 레벨까지 설명 가능하면
“실전 운영 경험자”로 판단된다.

---

마무리

React Native는 단순한 크로스플랫폼 도구가 아니라
JS 기반 네이티브 UI 렌더링 시스템이다.

구조를 이해하면:

• 성능 문제를 예측할 수 있고
• 병목을 설계 단계에서 제거할 수 있고
• 네이티브와의 경계를 전략적으로 나눌 수 있다.

이 구조 이해가 RN 실력의 진짜 기준이다.