리액트 네이티브 디버거 설치하기

리액트 네이티브 디버거를 오랜만에 다시 설치하려고 하니 달라진 점들이 있어서 기록으로 남겨둡니다.

1. 설치버전

2. 리액트네이티브 디버거 설치

3. 리덕스 익스텐션 설치

1. 설치 버전

react: 17.0.2
react-native: 0.65.1
react-redux: ^7.2.4
redux: ^4.1.1
redux-devtools-extension: ^2.13.9
redux-logger: ^3.0.6

2. 리액트네이티브 디버거 설치

https://github.com/jhen0409/react-native-debugger

GitHub - jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and includes React Inspe

 

맥에서 설치 할 때, Homebrew Cask 를 사용해서 인스톨 할 수 있는데, 방법은 Homebrew 버전에 따라 아래와 같습니다.

Homebrew 버전은 터미널에서 brew -v을 치면 알 수 있습니다.

< Homebrew 2.6.0

brew update && brew install --cask react-native-debugger

>= Homebrew 2.6.0

brew install --cask react-native-debugger

이 버전을 이용해서 설치하면 어플리케이션폴더에 자동으로 이동하기 때문에 이전처럼 일부러 옮겨 주지 않아도 됩니다.

화면에서 디버거를 실행 후, 어플리케이션에서 cmd+m 을 누르고 debug with chrome 을 누르면 디버그를 볼 수 있습니다.

3. Redux devtools extentions을 설치하는 방법

위에서 리액트네이티브 디버거를 설치를 알아봤는데요. 이제부터는 리덕스 디버거를 설치를 해 보겠습니다.

먼저 익스텐션과 로거를 설치합니다.

yarn add redux-devtools-extension redux-logger

설치가 끝나면, 리덕스로 생산된 스토어의 상태를 볼 것이기 때문에 스토어를 생성하는 화일에 아래처럼 composeWithDevTools를 임포트합니다.

import { composeWithDevTools } from 'redux-devtools-extension'

그리고 

return createStore()

를

return createStore(composeWithDevTools());

와 같이 변경시켜 스토어를 생성할 때 DevTool도 함께 실행될 수 있도록 해 줍니다.

위와 같이 설정을 해 주었다면, React Native DevTools 에서 스토어의 상태와 변화 로그를 쉽게 확인할 수 있습니다.