리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron)

이 글을 돌돌이에게 바칩니다.

 

리액트 네이티브는 디버깅이 복잡하다.

일반적인 웹 페이지를 만들 때처럼 브라우저 개발자 도구를 쓴다던지 하는게 제한적이기 때문이다.

그 때문인지 리액트 네이티브를 디버깅 할 수 있는 여러 툴들이 존재한다.

 

그래두 불편맨 ㅋㅋ

아무튼 오늘은 아래와 같은 내용들을 정리해보고자 한다.

 

1. Debug JS Remotely (Chrome Developer Tools, 크롬 개발자 도구) + 내장 Inspector

2. React devtools

3. Reactoron

---

1. Debug JS Remotely + 내장 Inspector

 

이름부터 알 수 있지만 리액트 네이티브의 스크립트 코드에 대한 디버깅은 기본적으로 제공한다.

 

(mac + ios 시뮬레이터를 기준으로 설명하겠슴둥)

 

시뮬레이터를 실행했다면 아래 주소로 들어가 스크립트를 디버깅해볼 수 있다.

 

http://localhost:8081/debugger-ui/

한번 제대로 콘솔이 찍히나 확인해보자.

위 주소(http://localhost:8081/debugger-ui/)로 접근해서 개발자 도구를 켜 콘솔메뉴를 들어가보자

 

응 잘 보인다 얘

 

스크립트 디버깅은 이런 식으로 하면 되는데...

간단한 스타일 정보를 볼 수 없을까?

 

const styles = StyleSheet.create({
  ...
  red: {
    color: 'red',
    fontSize: 30,
  },
});

...

const renderFunction = ({item}) => {
return (
	<View>
		// AF 코드를 가진 항목에만 스타일 적용
		<Text style={item.code === 'AF' ? styles.red : null}>
			{item.name} ({item.code})
		</Text>
	</View>
	);
};

우선 위와 같이 스타일 하나를 만들고, 데이터를 화면에 뿌려질 때 특정 항목에만 스타일을 적용하였다.

이제 스타일 정보를 봐보자.

 

 

시뮬레이터에서 단축키 Cmd + D 를 누르면 이런 메뉴들이 나온다.

저기서 'Show Inspector'를 누르고 내가 스타일 정보를 확인하고 싶은 곳을 클릭해보면

 

이런 식으로 대략적인 스타일 정보 파악이 가능하다.

 

띠요잉 머시여 이게 다여~?!

 

2. React devTools

 

부족한 내장 디버깅 툴을 보완해줄 수 있는 React devTools 라는 것을 이용해보도록 하겠다람쥐

react-devtools

위 사이트에 설명에 따라 react devtools를 설치해주자

 

뭐어~? 들어가기 싫다구우?

 

# Yarn
yarn global add react-devtools

# NPM
npm install -g react-devtools

# If you prefer to avoid global installations, 
# you can add react-devtools as a project dependency. 
# With Yarn, you can do this by running:

yarn add --dev react-devtools

나는 글로벌루다가 깔았다.

 

react-devtools

설치했다면 터미널에 위 명령어를 입력해보자

(아마 글로벌로 설치하지않았다면 프로젝트 내에서 해야하지않을까 싶은데...시도해본 건 아니라 확실하진않다.)

그럼 위와 같은 창이 뜬다.

이름을 보면 알 수 있지만 react-devtools 라는 도구는 네이티브만을 위한 도구는 아니다.

 

이 창이 떠있는 상태에서 1번에서 했던 것처럼 'Show Inspector'를 누르고 요소를 선택하면

실행되어 있던 react-devtools 창에서 요소를 표시해준다.

 

그럼 이렇게 컴포넌트 계층구조들을 확인 할 수 있고 style도 잘 확인할 수 있다.

const renderFunction = ({item}) => {
    return (
      <View>
        <Text
          style={item.code === 'AF' ? styles.red : null}
          propsValue={item.code}> // <- props를 넘겼다면
          {item.name} ({item.code})
        </Text>
      </View>
    );
  };

만일 코드의 propsValue 처럼 컴포넌트에 넘겨진 props 정보가 있다면

react-devtools의 props 항목에서 정보를 확인 할 수도 있다.

또한 react-devtools의 style 탭에서 직접 수정을 통해 시뮬레이터에 떠있는 화면의 임시적인 스타일링도 가능하다.

 

띠요잉 머시여 이게 다여~?!

 

3. Reactoron

컴포넌트의 state, props, style을 파악하기엔 react-devtools만으로도 충분하겠지만

API 호출 정보라던지, 조금 더 세밀한 디버깅을 하고 싶다면 Reactoron을 사용해볼 수 있다.

 

Reactron은 아래와 같은 기능을 지원한다.

- 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

 

Reactron을 사용하기 위해선 아래와 같은 단계를 거친다.

 

1. Reactoron 다운로드

Releases · infinitered/reactotron

2. 프로젝트에 Reactoron 설치

yarn add -D reactotron-react-native

3. 설치한 Reactoron 실행

4. Reactoron 설정파일 생성 (파일명 아무거나.js -> 나같은 경우는 config.js)

// 프로젝트의 root 경로에 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!

위와 같은 내용을 붙여넣어준다.

(기본 세팅)

5. index.js 혹은 App.js 에 아래 코드를 넣어준다.

if (__DEV__) {
  import('./config').then(() => console.log('Reactotron Configured'));
}

나같은 경우엔 index.js에 넣어주었고, 아래와 같은 모습이 되었다.

그럼 세팅은 끝났다.

이제 실행한 Reactron을 살펴보자.

이렇게 API 호출 정보에 대한 것도 쉽게 확인이 가능하고, 받아온 데이터 또한 확인이 가능하다.

사실 API 호출은 스크립트에서 이루어질테니, Debug JS Remotely만으로도 얼추 확인이 가능하겠지만

Reactoron에서는 정확한 status code와 호출시간 등에 대한 정보도 확인해볼 수 있다는 장점이 있다.

 

Reactoron이 다른 개발자 도구와 가장 구분되는 점은 Redux로 관리되는 state에 대한 로깅이 가능하다는 점이다.

 

그럼 이제부터 알아보도록 하자

 

근데 그건 여기선 안알려줌