RN 디버깅 도구, Reactotron

RN 개발환경에서 Debugging에 도움을 줄 도구, Reactotron

어떤 기능이 있냐면,
액션이 발생시에 콘솔로그처럼 사용할 수 있고,
코드추가 없이도 리액토트론을 통해 액션을 임의로 발생시킬 수 있고,
넣고자 하는 API 기능같은 것들을 테스트 해볼수도 있음

• view your application state
• show API requests & responses
• perform quick performance benchmarks
• subscribe to parts of your application state
• display messages similar to console.log
• track global errors width source-mapped stack traces including saga stack traces!
  등등등

간략히 사용해보기,

• Reactotron 다운로드 설치 실행
• 프로젝트 루트 경로에서 npm i --save-dev reactotron-react-native 설치 후 Reactotron 실행
• Reactotron의 config js 파일생성과 아래 작성 (기본설정, 커서터마이징도 가능)

  import Reactotron from 'reactotron-react-native'
  Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!

  • 위 config 파일 코드를 다음과 같이 앱 시작점에서 실행시킴.
    (ex: App.js or index.js) -if(DEV){
    import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
    }

기본설정 끝. 앱 실행.
Reactotron 과 앱연결이 되었다면, 아래 화면이 나타남.
기본설정만으로도 api requests, reponses, AsyncStorage 등 확인.
추가적인 설정을 하면 redux, saga,mobx의 store 상태도 확인가능.

에러 발생시 에러지점을 정확히 알려주고,
에러 내용을 클릭하면 코드 에디터에서 에러코드가 있는 지점으로 이동

React&Redux 와 Reactotron 연결하기

필요한 라이브러리 설치
#> yarn add reactotron-react-js reactotron-redux --dev
(개발환경에서만 사용할 것이니까 --dev 옵션)

• 설치

참고 블로그 3개

https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-js.md
https://medium.com/humanscape-tech/react-native-debugging-tool-reactotron-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-bb45f6f179e8
https://medium.com/humanscape-tech/react-native-debugging-tool-reactotron-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-bb45f6f179e8