Runtime 최적화와 Babel 플러그인을 통한 RN 스타일링 아키텍처 개선

Context

React Native의 기본 StyleSheet.create() 기반 설계는 앱 규모 확장에 따른 스타일 중복과 동적 테마 변경 시의 성능 저하 유발. 특히 테마 변경마다 스타일 객체를 재생성하며 불필요한 Re-render를 촉발하는 구조적 한계 존재.

Technical Solution

• Babel 플러그인을 통한 Compile-time 최적화로 런타임 오버헤드 제거
• Dependency Tracking 메커니즘을 도입하여 변경된 테마 요소만 선택적으로 업데이트하는 구조 설계
• Semantic Tokens 기반의 테마 정의를 통해 하드코딩을 배제하고 디자인 시스템의 일관성 확보
• Runtime-optimized computation을 통한 스타일 계산 비용 최소화 및 불필요한 재계산 방지
• 내장 Responsive Utilities를 활용하여 Dimensions API 기반의 반복적 분기 로직을 스타일 정의 단계로 통합
• useStyles 훅 기반의 반응형 스타일 바인딩을 통해 테마 상태 변경에 따른 효율적 UI 업데이트 구현