MobX 개발자도구 및 정리

이전에 mobx-react-devtools 모듈을 설치헀었는데요, 이를 한번 적용해보겠습니다.

굉장히 간단합니다.

AppTemplate 컴포넌트를 다음과 같이 수정하세요.

import React from 'react';
import DevTools from 'mobx-react-devtools';
import './AppTemplate.css';

const AppTemplate = ({counter, todos}) => {
  return (
    <div className="app-template">
      <div className="counter">{counter}</div>
      <div className="todos">{todos}</div>
      <DevTools />
    </div>
  );
};

export default AppTemplate;

그러면 이렇게 우측 상단에 아이콘들이 나타나는데, 첫번째 아이콘은 각 업데이트가 몇 ms 가 걸리는지 시각적으로 보여주고, 두번째는 observer 를 사용한 컴포넌트의 상태를 분석 할 수 있게 해주고, 세번째는 액션 정보를 콘솔로 볼 수 있게 해줍니다.

정리

이번 기회에 MobX 도 배워보았습니다! MobX 는 충분히 편리하고 유용한 라이브러리입니다. 우리가 리덕스도 함께 배워보았었는데, 설정측면이나 코드 측면에서는, MobX 가 조금 더 간단한 느낌이 있습니다. 리덕스가, 처음 사용 하게 될 때 조금 어렵다고 느껴질 수도 있는데, 사용하다보면 사실상 별거 아니라고 느끼게 될 것이므로, 걱정하지 않으셔도 됩니다.