🐛 49. React Native 디버깅 & 성능 모니터링 완전 정리 — 버그 추적부터 성능 진단까지

---

React Native 앱 개발을 하다 보면
버그는 반드시 생긴다. 그리고 대부분은 디바이스에 따라 다르게 발생한다.

따라서 앱의 디버깅 능력은 앱 품질을 결정짓는 핵심이다.

이번 글은 React Native 앱을 디버깅하고 성능을 분석하기 위한 방법들을
실전 기준으로 정리한 글이다.

---

✅ 1. 로그 확인

🔧 기본 로그: console.log

• 가장 기본적인 로그 방법
• iOS: Xcode 콘솔
• Android: npx react-native log-android or Android Studio Logcat

🔧 개선 로그: react-native-logs

npm install react-native-logs

const logger = createLogger();
logger.info('페이지 진입');
logger.error('에러 발생', error);

✅ 로그 레벨 관리 (info, warn, error)
✅ 로그 기록 파일 저장 가능
✅ 프로덕션 모드에선 로그 숨기기 가능

---

🚀 2. 디버깅 툴

🧩 React Native Debugger

• Redux 상태, 네트워크 요청, 콘솔 로그를 통합 확인
• redux-devtools-extension과 통합 가능
• flipper보다 설정이 단순해서 빠르게 사용 가능

brew install --cask react-native-debugger

---

🧩 Flipper

• Meta에서 만든 RN 공식 디버깅 툴
• 네이티브 뷰 계층, AsyncStorage, 이미지, 네트워크, 성능 등 시각화
• react-native-flipper 설치 필요

npm install react-native-flipper

✅ 디바이스 연결해서 실시간 디버깅
✅ 네이티브와 JS 브리지 연결 상태 확인 가능

---

📈 3. 성능 분석

⏱️ 렌더링 시간 측정

const start = performance.now();
// 렌더링 코드
const end = performance.now();
console.log(`렌더링 시간: ${end - start}ms`);

🧠 React Profiler

• 컴포넌트 리렌더링 시간 분석
• React.memo, useMemo, useCallback 등 최적화 판단 기준 제공

---

🛠️ 4. 에러 리포팅 서비스 연동

🔔 Sentry (에러 추적 서비스)

npm install @sentry/react-native
npx @sentry/wizard -i reactNative

• 앱에서 발생한 JS/네이티브 에러를 서버에 자동 전송
• 발생 시점, 스택트레이스, 유저 정보 등 자동 수집
• 크래시 추적, 슬랙/이메일 알림 연동 가능

✅ 실서비스 앱에서는 거의 필수

---

🧪 테스트 디바이스에서 자주 확인할 것

항목	확인 포인트
스크롤 지연	FlatList 최적화, 이미지 용량 확인
화면 깜빡임	리렌더링 원인 체크 (state 추적)
다국어 오류	번역 누락 키, fallback 확인
네트워크 실패	API 에러 시 UI fallback 제공

---

📝 내가 느낀 점

앱을 테스트할 때는 잘 돌아가지만
배포 후에야 터지는 이슈가 항상 생겼다.
그럴 때마다 디버깅 툴과 로그가 부족해서 고생한 적이 많다.

지금은 Flipper + Sentry + react-native-logs 조합으로
디버깅, 에러 추적, 성능 분석까지 한 번에 커버하고 있다.

---

🐞 “앱의 완성도는 보이는 것보다, 보이지 않는 곳에서 결정된다.”

---