React Native 전환 로드맵 4. RN 디버깅 플레이북

---

React Native에서 디버깅이 어려운 이유는 단순하다.
문제가 발생하는 층이 하나가 아니기 때문이다.

• JS 로직 문제일 수도 있고
• 렌더링 문제일 수도 있고
• 네이티브 브리지 문제일 수도 있으며
• 네트워크/환경 문제일 수도 있다

이 글의 목적은 “감으로 찍는 디버깅”이 아니라
층을 나누고, 순서대로 제거하는 표준 절차를 만드는 것이다.

---

에러 유형 지도 (반드시 분류부터)

RN 에러는 먼저 어디에서 발생했는지부터 나눠야 한다.

1️⃣ 런타임 에러 (JavaScript)

특징

• undefined 접근
• 잘못된 state 업데이트
• 함수 호출 오류

증상

• 빨간 에러 화면
• stack trace에 JS 파일 표시

대응

• 콘솔 로그
• 코드 레벨 문제

---

2️⃣ 렌더링 에러 (UI / State)

특징

• 화면이 안 뜸
• 일부 컴포넌트만 렌더링
• 무한 리렌더

원인

• 조건부 렌더링 오류
• 잘못된 key
• state 구조 설계 문제

---

3️⃣ 네이티브 에러 (Bridge / Module)

특징

• 앱 즉시 종료
• iOS/Android에서만 발생
• 에러 메시지 불친절

원인

• 네이티브 모듈 설정 오류
• 권한/SDK 문제
• Expo / CLI 환경 불일치

---

4️⃣ 네트워크 에러

특징

• 데이터 안 옴
• 로딩 무한
• 특정 기기에서만 실패

원인

• CORS 착각 (RN에는 없음)
• 네트워크 권한
• 로컬 IP / 실제 기기 이슈

👉 디버깅 시작은 항상 “이게 어느 층 문제인가?”다.

---

로그 전략 (구조화해서 남겨라)

로그를 찍는 목적

• 값 확인 ❌
• 흐름 확인 ⭕

나쁜 로그

console.log(data);

→ 맥락 없음, 의미 없음

좋은 로그

console.log('[AddItem]', {
  input,
  itemsLength: items.length,
});

실무 로그 규칙

1. 태그 붙이기

   • [ScreenName], [Action], [API]
2. 객체로 묶기
3. 상태 변경 전/후 분리

console.log('[DeleteItem:before]', items);
setItems(...)
console.log('[DeleteItem:after]');

---

Remote Debugging 실전 주의점

Remote Debugging이란

• JS 코드를 Chrome/V8 환경에서 실행
• 브라우저 DevTools 사용 가능

장점

• breakpoint 사용 가능
• 네트워크 요청 추적 쉬움
• React DevTools 연동 편함

치명적인 단점

• 실제 디바이스 환경이 아님
• 성능/타이밍 문제 왜곡
• 애니메이션/제스처 관련 버그 숨김

실무 원칙

• 로직 확인용으로만 사용
• 성능/렌더링 문제는 반드시 디바이스 기준으로 재확인

---

React DevTools로 봐야 할 핵심 포인트

React DevTools는 “컴포넌트가 왜 다시 그려졌는가”를 추적하는 도구다.

반드시 확인할 것 4가지

1. 리렌더 빈도

   • state 하나 바뀌었는데 전체 화면 리렌더?

2. props 변화

   • 불필요한 객체/함수 새로 생성 중인가

3. state 위치

   • 너무 상위에 있지 않은가

4. key 문제

   • 리스트 아이템 재사용 꼬임

자주 터지는 패턴

• inline 함수 props
• 불변성 깨진 state
• index 기반 key

👉 렌더링 문제의 80%는 구조 문제다.

---

10분 진단 루틴 (체크리스트)

문제 발생 시, 아래 순서대로 기계적으로 진행한다.

1분차: 에러 분류

• JS / 렌더링 / 네이티브 / 네트워크?

2~3분차: 로그 삽입

• 이벤트 시작/끝
• 상태 변경 지점

4~5분차: 조건 제거

• 조건부 렌더링 제거
• 하드코딩으로 확인

6~7분차: 환경 분리

• 에뮬레이터 vs 실제 기기
• Remote Debugging ON/OFF

8~9분차: DevTools 확인

• 리렌더 원인
• props/state 변화

10분차: 원인 범위 확정

• 코드 문제인가?
• 환경 문제인가?
• 설계 문제인가?

10분이 지나도 범위가 안 좁혀지면 문제는 단일 버그가 아니라 구조 문제일 확률이 높다.

---

이 파트의 결론

• RN 디버깅은 “툴 싸움”이 아니라 절차 싸움
• 로그는 출력이 아니라 설계
• 빨리 고치는 사람의 공통점은 → 문제를 정확히 분류한다

이 디버깅 루틴이 몸에 붙으면 다음 단계인 상태 관리·내비게이션 설계에서 시행착오가 급격히 줄어든다.

---

• 참고: React Native 완벽 가이드 2025