React Native Optimization (2025) - 리액트 리렌더링 모델

콜스택에서 발행한 RN 최적화 문서인 React Native Optimization를 2023년에 공부했던 것 같은데,
2025년 버전도 새로 나와서 이 참에 정리해 봤다.

 

예전에 웹 개발 팀원분이 React Native도 DOM 기반이에요? 라고 질문했을 때 아닌 건 알았지만, 제대로 설명 못했던 경험이 있는데, 리액트 리렌더링 모델 내용을 정리하면서 그때 생각이 났다.
 
아직도 React와 React Native의 차이를 모르는 분이라면 해당 내용을 읽어보면 좋을 것 같다.
react-dom은 별도의 렌더러라는 것을 ...

---

 

앱이 ‘빠르다’는 것은 무엇을 의미할까?
 
ex.
1940년대에 뉴욕의 한 오피스 빌딩에서 느린 엘리베이터에 대해 한 직원이 불만을 호소했는데,
건물 관리자는 엘리베이터 속도를 실제로 높이는 대신 근처에 거울을 설치했다.
 
어떻게 됐을까? 사람들은 거울을 통해 자신을 바라보면서, 대기 시간을 줄이고 주위를 분산시킬 수 있었다.
 
즉, ⭐️ 실제로 기술적인 개선도 중요하지만, 인지적인 성능 개선도 중요하다.
-> 스플래시 화면, 스켈레톤 UI, 애니메이션과 같은 트릭을 통해 사용자 만족도를 높일 수 있다.
 
인지적 성능이 중요한 만큼, 기술적인 개선도 중요하다.
 

---

 
 
사용자 경험을 올리는 데 중요한 지표 2가지

1. TTI (Time To Interactive) : 앱이 실행된 후 앱을 얼마나 빨리 사용할 수 있게 되는지 측정하는 지표
   → 앱 초기 로드 외에도 특정 화면까지의 접근하는 데 걸리는 시간도 포함된다.
2. FPS (Frames Per Second) : 초당 프레임 수로 앱이 스크롤, 스와이프 등 사용자 상호작용에 얼마나 부드럽게 반응하는지 측정하는 지표

 

---

PART 1

React Native의 Javascript 및 React를 최적화하여 FPS를 개선하는 기술

- 콜스택의 리액트 네이티브 개발자 100명을 대상으로 한 내부 설문조사에 따르면,
모바일, TV, 데스크톱 리액트 네이티브 앱에서 직면하는 성능 문제의 80%가 자바스크립트 측면에서 발생함.

React Native Thread 구조

 

React re-rendering model

⭐️ 렌더링 시점은 React가 결정하고, 렌더링 방법은 별도의 렌더러가 결정한다.
 
✅ React의 렌더링 및 업데이트 모델

• React는 상태(state)에 따라 UI를 렌더링하고 업데이트하는 역할을 한다.
• 핵심 구성 요소
  • Public API 정의
  • 크로스 플랫폼 기능
  • Reconciliation 알고리즘
    : 상태 변화에 따라 UI를 효율적으로 업데이트

✅ "What"과 "How"의 분리

• React는 "무엇을 렌더링할지(what)"만 신경 쓰고,
• 실제 "어떻게 렌더링할지(how)"는 별도의 렌더러가 담당함
  
  → 각 플랫폼에 따른 렌더러 예시:
  
  • react-dom: 웹용
  • react-native: 모바일(Android, iOS)
  • react-native-windows: 윈도우용

• 이 구조 덕분에 하나의 컴포넌트 기반 코드로 다양한 플랫폼에서 동시에 UI를 구성 가능

✅ Virtual DOM과 실제 DOM의 비교 및 업데이트 (react-dom을 사용하는 경우)

• React는 변경된 Model을 기반으로 새로운 Virtual DOM을 생성
• 이전 Virtual DOM과 비교(diff) 후,
• 변경된 부분만 패치(patch) 방식으로 실제 DOM에 반영
  → 최소한의 업데이트만 수행함 (성능 최적화)

✅ 컴포넌트가 다시 렌더링 되는 경우

1. 부모 컴포넌트가 리렌더링 될 때
2. 상태(state, hooks 포함)가 변경될 때
3. props가 변경될 때
4. context가 변경될 때
5. 강제로 업데이트할 때 (forceUpdate() 등)

• React는 공통의 Reconciliation 알고리즘을 통해 어떤 컴포넌트를 업데이트해야 할지 판단한다.
• Reconciliation은 웹이든, React Native든 공통된 로직

 

---

 
 
다음은 JS와 React 코드를 프로파일링 하여 FPS 속도를 높이고, JS 메모리 누수를 추적하여 개선하는 방법에 대해 알아보자.