React Native 의 환경 (3. 네이티브 의존성, 디버깅 환경)

네이티브 의존성 관리

웹 프로젝트는 npm install만으로 모든 의존성이 해결된다. 자바스크립트만 빌드하면 되기 때문이다.
반면 React Native는 JS 위에 네이티브 코드(Swift / Objective-C / Kotlin / Java)가 얹힌 구조이므로, JS 패키지 설치 이후 네이티브 빌드 단계가 반드시 필요하다.

과거에는 이 네이티브 의존성 연결 과정을 개발자가 직접 관리했지만, 현재의 React Native는 대부분의 과정을 CLI가 자동으로 처리한다. 단, 자동화되었을 뿐 네이티브 빌드 시스템 자체가 사라진 것은 아니다.

1. iOS 의존성 관리 (CocoaPods + CLI 자동화)

CocoaPods는 React Native iOS의 공식 의존성 관리 도구다. pod install 은 필수 개념이지만, 현재는 직접 실행해서 설치하는 명령어가 아니게되었다. (deprecated) React Native CLI가 빌드 시점에 pod install을 자동으로 실행하므로, 개발자가 매번 직접 실행할 필요는 없어졌다.

• 동작 원리

1. npm install {library} 실행
   • JS 코드가 node_modules에 설치된다.
   • 네이티브 모듈이 있으면 Podspec / Codegen 대상이 된다.
2. npx react-native run-ios 실행
   • RN CLI가 네이티브 변경 사항을 감지한다.
   • 필요 시 내부적으로 pod install을 자동 실행한다.
   • Xcode 빌드 및 시뮬레이터 실행이 이어진다.

pnpm install 라이브러리명
pnpm run ios   # 네이티브 코드 변경이 있으므로 전체 리빌드

2. Android의 의존성 관리 Gradle

안드로이드는 빌드 도구인 Gradle이 의존성 관리까지 담당한다.

• 동작 원리 : iOS의 pod install 같은 수동 명령어가 거의 필요 없다. Gradle이 빌드 시점에 자동으로 package.json에 있는 라이브러리를 감지하고 안드로이드 모듈로 포함시킨다.

• 주의점 : 자동으로 되지만, 설정 충돌이 잦다. 특히 라이브러리마다 요구하는 Kotlin 버전이나 Android SDK 버전이 다를 때 빌드 에러가 터진다. 이때는 android/build.gradle 파일을 열어 버전을 수동으로 맞춰줘야 한다.

디버깅 환경 : 개발자 도구의 파편화

웹 개발은 크롬 개발자 도구(F12) 하나로 [로그 - 요소 검사 - 네트워크 - 성능]을 모두 해결한다. 하지만 RN은 이 기능들이 여러 도구로 쪼개져 있다.

1. 로그 확인

• 도구 : Metro 터미널 (앱을 실행한 터미널 창)
• 특징 : console.log를 찍으면 기본적으로 터미널에 텍스트로 출력된다. 객체(Object)나 배열(Array)이 복잡하게 중첩된 경우 터미널에서는 확인이 어렵다. 이럴 때 전용 디버거를 연결해야 한다.

2. 요소 검사

• 도구 : 인앱 개발자 메뉴
• 실행법 :
  • 시뮬레이터 : Cmd + D (iOS) / Cmd + M (Android)
  • 실기기 : 폰을 흔들거나(Shake), Metro 터미널에서 d 키 입력.
• 기능
  • Show Element Inspector : 웹의 '요소 선택(화살표 아이콘)'과 같다. 앱 화면의 컴포넌트를 터치하면 해당 영역의 크기(Margin, Padding)와 스타일 정보를 볼 수 있다.
  • 하지만 웹처럼 실시간으로 스타일을 수정해서 테스트해 볼 수는 없다.

3. 로직 디버깅

• 도구 : Chrome DevTools
• 원리 : Hermes 엔진은 Chrome DevTools Protocol을 지원한다.
• 사용법 :
  1. Metro 터미널에서 j 키를 누른다.
  2. 크롬 브라우저가 열리거나 chrome://inspect 페이지를 통해 연결된다.
  3. Source 탭: 번들링된 코드가 아닌, 원본 소스 코드(Source Map 적용)에 브레이크 포인트(Break Point)를 걸 수 있다.
  4. Console 탭: 여기서 찍히는 로그는 객체를 펼쳐볼 수 있어 터미널보다 상세하다.

4. React 구조 확인

• 도구 : React DevTools
• 차이점 : 웹에서는 크롬 익스텐션으로 설치하지만, RN은 별도의 프로그램으로 실행해야 한다.

props 와 state의 변화를 실시간으로 추적할 수 있다. 컴포넌트 렌더링 최적화를 할 때 참고하면 좋다.

5. 네트워크 확인

• 문제 : 기본 디버거에서는 네트워크 요청(fetch/axios) 내용을 알려주지 않는다.
• 해결 : React Native Debugger (구형): Redux, Network, React DevTools를 하나로 합친 툴. 여전히 많이 쓰인다.
• Plugin : reactotron 같은 별도 라이브러리를 설치하여 네트워크 트래픽을 모니터링하는 것이 일반적이다.