Reactoron으로 Redux state 모니터링 하기 + console.log 연결

2022.08.30 - [프로그래밍] - 리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron)

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

 

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

 

설치 및 기본세팅에 관한 것은 이전 포스팅을 참고해주셈

 

Reactoron은 다른 개발자 도구와는 달리 Redux state에 대한 모니터링을 지원한다.

그런데 자동으로 해주는 것은 아니고, 세팅을 해주어야한다.

 

1. reactoron-redux 설치

 

앞선 포스팅에서 reactoron을 설치해주었다면, reactoron-redux도 설치해주어야한다.

yarn add -D reactotron-redux

위 코드를 이용해 설치를 하고나서는 reactoron 설정파일을 수정해주어야한다.

 

2. reactoron 설정파일 수정 

import Reactotron from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';

const reactotron = Reactotron.configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux()) // <-
  .connect(); // let's connect!

export default reactotron;

중간에 use(reactoronRedux()) 부분이 reactoron에서 redux 모니터링을 사용할 수 있게 해주는 부분이다.

만일 내 이전 포스팅을 참고하여 reactoron 설정파일을 구성한 경우, 주의 깊게 보며 코드를 수정해야한다.

(혹은 복붙을)

 

1. 'const reactoron = '

2. export default reactoron;

 

위 부분이 이전 세팅코드와 다르다.

 

3. store 파일에 reactoron middleware 만들기

 

워메 할거많다잉

 

import {configureStore} from '@reduxjs/toolkit';
import reactotron from '../../config';
import sampleSlice from './sampleSlice';

export default configureStore({
  reducer: {
    count: sampleSlice,
  },
  enhancers: [reactotron.createEnhancer()], // <- 
});

store 파일에서 enhancer를 추가해준다.

reactoron이 하나의 middleware가 되어 state의 변경을 감지하는가보다.

 

이제 세팅은 끝났다!

이 상태로 reactoron의 state 탭을 들어가보면 redux state를 모니터링 할 수 있게 된다.

 

와우 맨

 

---

번외로 reactoron에는 Timeline이라는 곳이 있는데 이쪽에선 네이티브에서 발생하는 주요 이벤트들과 액션들의 흐름을 볼 수 있다.

 

 

두 개의 액션을 발생시켰을 때 타임라인에 액션이 이런 식으로 감지된다.

payload를 아무것도 넘겨주지 않기 때문에 undefined 처리되었지만, 아마 넘겨준다면 payload도 볼 수 있는 모양이다.

 

뿐만 아니라 Reactoron을 이용한 로깅도 타임라인에서 볼 수 있다.

import reactotron from 'reactotron-react-native';
...

// log 타입에 따른 로깅
reactotron.log('안녕 난 리액트론');
reactotron.warn('*glares*');
reactotron.error("Now you've done it.");

// reactoron의 display 함수를 이용한 로깅
reactotron.display({
  name: 'KNOCK KNOCK',
  preview: "Who's there?",
  value: 'Orange.',
});

이런 식으로 남긴 로그들은 다음과 같이 표현되어 타임라인에 나타난다.

 

이런 식으로 로그를 볼 수 있다.

 

그래서 이번엔 주로 개발을 할 때 사용하는 console.log를 reactoron의 timeline과 연결하는 방법에 대해 알아보려고 한다.

 

reactoron 설정파일을 수정해주자.

 

import Reactotron from 'reactotron-react-native';
import {reactotronRedux} from 'reactotron-redux';

const reactotron = Reactotron.configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(reactotronRedux())
  .connect(); // let's connect!

//  patch console.log to send log to reactotron <- 이 부분
const yeOldeConsoleLog = console.log;
console.log = (...args) => {
  yeOldeConsoleLog(...args);
  Reactotron.display({
    name: 'CONSOLE.LOG',
    value: args,
    preview: args.length > 0 && typeof args[0] === 'string' ? args[0] : null,
  });
};

export default reactotron;

(코드는 퍼왔다맨)

중간에 있는 코드가 console.log를 재정의해주는 부분인데 내용을 보면 

console.log 함수를 '(구) console.log 호출 -> Reactoron식 로깅' 으로 바꿔준다.

얼ㅋ

 

이런 식으로 처리를 해주고나서 console.log를 찍어보면

 

기존 방식대로 console.log를 수행하면서도 reactoron의 timeline에 해당 로그를 띄울 수 있다.

 

이 외에도 storybook on/off를 reactoron을 통해서 하는 등의 기능 또한 지원하니 (리액트 네이티브 한정)

다른 플러그인들의 기능이 궁금하다면 아래 링크에서 찾아보면 될 것이다.

 

https://github.com/infinitered/reactotron/tree/master/docs

GitHub - infinitered/reactotron: A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows