RN 디버깅 에러 핸들링

에러메세지 읽기.

무엇이 잘못되었고 문제가 무엇인지에 대한 첫번째 힌트이다. 에러메세지가 완벽하지 않은 경우도 있지만 제일 첫번째 에러가 생긴 이유를 알 수 있다.
에러메세지를 보면 해결을 위해 어디를 살펴봐야 하는지와 어떤 부분을 수정해야 하는지도 알 수 있다.

추가적으로 아랫부분에 스택트레이스를 살펴보면 어디에서 에러가 발생했는지 알 수 있다. 보다보면 유용한 정보가 있다.

공식문서를 살펴보는 것이 좋은 해결책이 될 수 있다.

모바일기기의 에러메세지보다 터미널의 에러메세지를 보는 것이 더 분명하다.

CONSOLE.LOG이용

console.log를 이용하면 어플리케이션의 흐름을 이해하기 좋다.

값이 출력되거나 변수나 상태의 값이 출력되게 할 수도 있다.

자바스크립트로 원격으로 디버깅하기

터미널에서 m버튼을 누르면 개발자메뉴가 토글로 뜬다
시뮬레이터에서는 commend d, 에뮬레이터에서는 command m을 눌러 열 수 있다.

메뉴에서 debug remote js를 누르면 chrome에서 새 탭이 열리게 된다. 이 탭에서 chrome 개발자도구를 확인할 수 있다.

React 개발자 도구 사용하기

별도의 터미널에서 전역으로 설치한다
sudo npm install -g react-devtools
해서 패키지 설치
맥을 사용한다면 sudo 명령어를 넣어야하고 windows를 사용하면 sudo명령어 사용하면 안된다.

패키지 설치 후 react-devtools 라는 명령어를 터미널에 치면 개발자 창이 뜬다.
그러고 debug remote JS를 실행하면 react-devtools와 연결된다.
컴포넌트 트리를 볼 수 있어 유용하다
어떤 프로퍼티가 포함됐는지 그 안에는 어떤 값이 있는지 어떤 state가 있는지 확인할 수 있다.
앱이 구동중인 상태에서 컴포넌트 트리를 살펴보거나 상태와 프로퍼티를 분석하거나 그 값들을 변경할 수 있다.

퍼포먼스에 문제가 생길 수 있지만 상당히 유용한 기능이다.