React-native Debugging Tool - Reactotron 알아보기
안녕하세요. 휴먼스케이프에서 개발자로 일하고 있는 Hugh 입니다.
오늘은 react-native 개발 환경에서 Debugging에 도움이 될 수 있는 도구인 Reactotron을 소개하려고 합니다.
react-native 개발 환경에서의 Debugging은 Reactotron이 아니더라도 여러 가지 사용 가능한 도구들이 있습니다. Reactotron을 소개하기전에 다른 도구들을 간략하게 알아본 뒤, Reactotron을 소개하도록 하겠습니다.
- Debug Js Remotely + Chrome Developer Tools, Toggle Inspector
가장 접근하기 쉬운 방식으로 에뮬레이터나 디바이스의 개발자 옵션(ios: ⌘ + d, android: ⌘ + m)에서 Debug JS Remotely 모드를 활성화시키고, Chrome Developer Tools(⌘⌥ + I)의 console탭에서 코드안의 console.log()를 확인하는 방법입니다. source 탭에서는 js 파일안에 breakpoint 활용도 가능합니다.
또 개발자 옵션에서 Toggle Inspector를 활성화시키면, Inspect, Pref, Network, Touchables 탭이 나타나는데 각 탭에서 나타내는 정보는 꽤 유용합니다. 각 탭은 차례대로 컴포넌트 계층구조, 앱의 퍼포먼스, api call 상태, 버튼(TouchableOpacity)의 영역 정보들을 제공합니다.
사용 방법이 간편하고 여러 정보를 제공해주어 유용하지만, 별도의 화면 없이 작은 에뮬레이터를 통해 전달하기때문에 보기에 불편하고, props와 state 등의 값을 바로 확인할 수 없는 단점이 있습니다.
2. React-devtools
react-devtools을 사용하려면 설치가 필요합니다. npm을 사용하여 설치(npm i react-devtools)하고, react-devtools 명령어로 간단하게 실행시킬 수 있습니다.
위에서 소개해 드린 Debug Js Remotely, Toggle Inspercor와 비교해보면, 컴포넌트 계층구조, props, state 값을 확인하기 편합니다. 그리고 props, state, style 등의 값을 도구에서 직접 변경이 가능하고 바로 확인할 수 있습니다. 하지만 api call의 상태 확인이 불가해 이 점이 아쉽습니다.
3. Reactotron
오늘 소개해 드릴 Reactotron은 위에서 소개드렸던 두 도구의 장점 + ‘@’를 제공하고 있고, 내용은 아래와 같습니다.
- 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 with source-mapped stack traces including saga stack traces!
- dispatch actions like a government-run mind control experiment
- hot swap your app’s state using Redux or mobx-state-tree
- track your sagas
- show image overlay in React Native
- track your Async Storage in React Native
너무 많은 기능을 제공해주고 있는데요. 간략하게 사용해보도록 하겠습니다.
먼저, 아래의 과정을 거쳐 설치 및 기본적인 설정을 해줍니다.
- 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 & responses, AsyncStorage 등을 확인할 수 있습니다.추가적인 설정을 하면 redux, saga, mobx의 store의 상태도 확인이 가능합니다.
또 에러가 발생한 경우 에러 지점을 아래와 같이 정확하게 알려주고, 에러내용을 클릭하면 코드 에디터에서 에러코드가 있는 지점으로 이동이 됩니다.
이상으로 react-native 개발 환경에서 유용한 debugging 도구들과에 Reactotron에 대해서 간략하게 알아 보았고, 다음에는 Reactotron을 집중적으로 파헤쳐보도록 하겠습니다.
감사합니다.
