Mobx-State-Tree에 대해 알아보자(1)👌

Mobx State Tree 구조는 리액트 및 다른 자바스크립트 프레임워크를 위한 state 관리 솔루션이다

• State관리 해결방법은 더 큰 application으로 갈 수록 필수이다.

Comparison to Redux

Redux, the industry statndard for React state management, is very complex and includes a lot of boilerplate

Redux

장점

• 규모가 있는 곳에서도 증명됨
• large community
• very performant (기능성 좋음)
• immutable

단점

• 리덕스는 많은 boiler plate을 필요로 하기에 굉장히 복잡하다
• middleware에 매우 의존적이다.

Mobx의 등장

이러한 Redux의 복잡성이 Mobx의 등장의 배경이 되었다

Mobx Structure

• Built on obsevable
• boilerplate이 거의 없다
• 매우 performan 하다
• unopinionated (독선적이지 않다)
• mutable

Mobx State Tree(MST)

Mobx State Tree(MST) is an opinionated(독선적)이고 transactional state management solution built on top of Mobx

• 타입스크립트에 대한 완벽한 지원
• 독선적(opitionated)
• Immutable through snapshots

MST를 이해하기 위해서는 Tree , Nodes, Leaves, Actions, Views, Snapshots이 4개만 알면 된다!

• MST는 트리구조로 되어있는데
• 각 트리는 nodes(model)와 leaves(properties)로 구성되어 있다
• MST는 불변성(immutiability)을 위해 Snapshot를 사용한다
• Actions tree를 바꾸기 위해 사용된다
• Views는 memorization(기억)을 위해 사용된다
• 비동기적 효과를 지원한다
• Lifecycle method를 지원한다
  

MST integration with React is easy with typescript decorators

설치

• npx create-react-app "파일명" --typescript
• 파일이동
• yarn or npm install
• `yarn add mobx mobx-react mobx-state-tree
• yarn add uuid
• yarn add @types/uuid -D
• tsconfig.json 파일에서 "experimentalDecorators": true, 추가

>>App.tsx 
import React from "react";
import logo from "./logo.svg";
import "./App.css";

interface Props {}

interface State {}

class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    this.state = {};
  }

  render() {
    return (
      <div>
        <p>hi</p>
      </div>
    );
  }
}

export default App;

여기서 error가 뜰 때 참고사이트

Two ways of Contructuring Tree

Cory 아저씨는 Single Root Store이 더 간편해서 이 방법을 추천한다고 한다 '

우리가 만들 앱의 트리구조이다. 여기서 전체 diagram은 Tree/Stores를, O(원)은
Node/Model를 smallText 눈 Leaf/Properties를 뜻한다

출처 : Cory McAboy 유튜브