React Native Text 컴포넌트 성능 40% 올리기

TL;DR: 무한 스크롤 성능 개선을 위해 Text 컴포넌트 대신 NativeText를 직접 사용하기.

🌟 문제 상황

• 기존 Text 컴포넌트로 15,000줄 렌더링 시 4.33초 소요
• 중첩 스타일 상속(TextAncestor)과 프롭스 리매핑으로 인한 오버헤드 발생

💡 해결 방법

// 기존 ❌
import { Text } from "react-native";

// 개선 ✅
import { NativeText } from "react-native/Libraries/Text/TextNativeComponent";

• NativeText 직접 사용으로 불필요한 레이어 제거
• 스타일 상속/이벤트 핸들러가 필요 없는 단순 텍스트 케이스에 최적화

⚡ 성능 향상

• 15,000줄 렌더링 시간 4.33s → 2.52s (약 40% 개선)
• 메모리 사용량 감소 및 스크롤 부드러움 개선

📌 핵심 원리

🧩 중첩 텍스트 동작 원리

<Text style={{ fontSize: 20 }}>
  부모 텍스트
  <Text style={{ color: "red" }}>자식 텍스트</Text>
</Text>

• TextAncestor 동작 메커니즘 🔄

  // ... existing code ...
  <TextAncestor.Provider value={true}>
    {children}
  </TextAncestor.Provider>

  • Context API를 이용한 텍스트 계층 관리
  • 1. 스타일 상속 가능 여부 판단
  • 2. 중첩 레이아웃 계산 수행

• 스타일 상속: 자식 Text는 부모의 fontSize(20)을 상속 + color(red)로 오버라이드

• 성능 주의: Context 업데이트로 인해 10중 이상 중첩시 렌더링 시간 2~3배 증가 ⚠️

⚖️ 추천 사용법

케이스	솔루션	예시
스타일 상속 필요	Text 중첩	<Text><Text>...</Text></Text>
고성능 요구	NativeText 분리	<View><NativeText/><NativeText/></View>

📢 업데이트 사항

• 최신 React Native 버전에서는 Text 컴포넌트가 35% 더 빠르게 개선되긴했어요.
• 하지만 nativeText를 바로 사용하는게 더 좋겠죠?

참고링크

참고링크