앱 시작 시간(TTI)을 최적화하기 위해 초기 로딩 작업을 최소화하고, React Native DevTools 프로파일러나 Sentry를 활용하여 병목 현상을 식별하며, Expo Router의 비동기 라우트를 활성화하고 Expo Atlas로 번들 크기를 분석하세요. 🚀
불필요한 리렌더링을 방지하려면 개발자 도구의 '업데이트 하이라이트' 기능을 사용하여 리렌더링 원인을 파악하고, React Compiler를 활성화하여 useMemo나 useCallback 같은 최적화 훅을 자동으로 관리하게 하세요. ♻️
애니메이션 끊김 현상(jank)을 해결하고 60fps를 달성하려면 Reanimated나 Worklets를 사용하여 애니메이션을 JS 스레드에서 분리하고, 성능 모니터로 UI/JS 스레드 상태를 확인하며, 무거운 연산은 백엔드로 옮기거나 React Transition API를 활용하여 JS 스레드 블로킹을 피하세요. 🎬
리스트 성능을 극대화하려면 기본 FlatList 대신 FlashList나 LegendList를 사용하고, 렌더링 함수 내에서 과도한 연산을 피하며 데이터를 미리 처리하고, 불변성(immutable) 업데이트를 통해 불필요한 리스트 전체 리렌더링을 방지하세요. 📜
React Context의 과도한 사용을 피하고, 애플리케이션 전체에 하나의 거대한 Context 대신 특정 목적에 맞는 작은 Context들을 사용하며, Jotai나 Zustand와 같은 효율적인 상태 관리 라이브러리를 활용하여 불필요한 리렌더링을 줄이세요. 🧩
메모리 누수를 방지하려면 useEffect의 클린업 기능을 사용하여 이벤트 리스너, 인터벌, 웹소켓 연결, 비동기 작업 등을 적절히 해제하고, 프로파일링 도구를 사용하여 JS 메모리 누수 지점을 식별하세요. 💧
추측 대신 측정을 통해 성능을 개선하세요. React Native 프로파일링 문서, Flipper(Android), Sentry의 트레이싱 기능을 활용하여 앱의 실제 성능 지표를 파악하고, API 호출이나 데이터베이스 쿼리 등 백엔드까지 아우르는 전체적인 성능 병목을 찾아내세요. 📏