React Native Expo 앱에서 디버깅 방법

리액트 네이티브 ExpoGo 앱을 사용한다는 전제로 디버깅 하는 방법입니다.

 

먼저 터미널에서 디버깅 툴을 설치해줍니다.(https://www.npmjs.com/package/react-devtools)

//전역 설치
npm install -g react-devtools

//종속성 설치
npm install --dev react-devtools

-g 옵션으로 해당 프로젝트만이 아닌 다른 프로젝트에서 사용할 수 있게 설치했습니다.

 

터미널에서 npm start로 프로젝트를 실행해줍니다.

npm start

 

새로운 터미널을 하나 더 추가로 열어서 디버깅 툴 명령어를 실행합니다.(기존에 열었던 터미널은 서버 기동용으로 사용해야하기 때문에 꼭 새로운 터미널을 추가해주세요.)

react-devtools

VS에서는 터미널 상단의 +버튼을 클릭하면 새 터미널을 만들 수 있습니다.

디버깅 명령어를 실행하면 아래와 같이 새 창이 자동으로 띄워집니다.

 

ExpoGo 앱을 통해서 프로젝트를 클릭하면 자동으로 디버킹 툴이 활성화됩니다.

 

디버깅 툴이 자동으로 Expo 앱에서 실행된 앱 정보를 띄워줍니다.

참조 : Expo 문서 도구들(https://docs.expo.dev/debugging/tools/#developer-menu)