Expo+Redux 앱을 디버깅하는 방법 4가지 비교

Expo+Redux 앱을 디버깅하는 가장 좋은 방법은 무엇입니까?
네 가지 옵션을 비교했습니다.

redux-logger
Remote Redux Devtools
React Native Debugger
Reactotron

결론부터 먼저 말하면,
React Native Debugger를 사용하십시오. 설정 가이드는 여기

1. redux-logger

Redux-logger는 어떤 액션이 fire되고 어떻게 state가 바뀌었는지를 console.log 해주는 미들웨어입니다.

Expo 특유의 설정 어려움 없이 웹시와 마찬가지로 사용할 수 있습니다.

단점은 읽기 전용이며 Redux Devtools Extension 과 같은 완전한 기능이 없다는 것입니다.

그리고, 프로젝트마다 npm i 할 필요가 있습니다.

2. Remote Redux DevTools

Remote Redux DevTools는 Redux Devtools Extension의 데스크톱 앱 버전에서 React Native와 함께 사용할 수 있습니다.

설정 코드는 간단하며 웹 시간과 비슷합니다.

단지 정확히 동일하지 않으므로 문서를 잘 읽으십시오.

그리고, 프로젝트마다 npm i 할 필요가 있습니다.

가장 아픈 것은이 Redux 기능 외에도 필요한 모든 것을 제공하는 다른 옵션이 있다는 것입니다. 그것이 React Native Debugger.

3. React Native Debugger

React Native Debugger는 무려 그 3종의 신기, Chrome, React, Redux의 devtools를 하나의 데스크탑 앱으로 정리한 것입니다.

프로젝트 당 npm i 할 필요없고 설치 코드는 웹과 정확히 동일합니다.

하나의 단점은, 공식의 docs가 상당히 알기 어렵고, 특히 expo와 합치면 문제가 있는 것. 그 때는 이 가이드 를 봐 주세요.

4. Reactotron

그럼 마지막입니다. Reactotron은 React Native를 종합적으로 inspect할 수 있는 데스크톱 앱으로, redux의 디버그에 한정하지 않고, 다양한 수 있습니다.

그냥 Redux 디버깅을 쉽게하고 싶습니다! 라고 하는 이번 취지로부터 하면, 몇가지 아픈 점이 있습니다.

첫째, 소위 redux devtools와 react devtools는 UI가 다르며 학습 비용이 있습니다.

둘째, 각 프로젝트마다 여러 개의 npm i가 필요합니다.

npm install — save-dev reactotron-react-native reactotron-redux reactotron-redux-saga

셋째, 이런 종류의 새로운 설정 코드를 작성해야합니다.


그렇다고해서, 결론,

React Native Debugger는 3종의 신기(Chorme, React, Redux devtools)를 프로젝트마다 새로운 패키지 없이 최소한의 셋업 코드로 사용할 수 있다는 점에서 가장 뛰어나다고 생각했습니다.