MobX 란

https://disco-biscuit.tistory.com/86#%ED%8A%B9%EC%A7%95

MobX 를 이용한 간단한 앱 만들기

 

 

MobX는 상태 관리 라이브러리로서, 주로 React와 같은 JavaScript 프레임워크와 함께 사용되며 애플리케이션의 상태를 관리하는 데 도움을 줍니다. MobX는 리액티브 프로그래밍 원칙을 기반으로 하며, 상태의 변화를 자동으로 감지하고 필요한 부분만 업데이트하는 방식으로 동작합니다. 옵저버 패턴.

 

• 쉽다.
  미니멀하고 보일러 플레이트로부터 자유로운 코드를 통해 당신의 의도를 잘 담아내 보세요. 데이터를 변경하고 싶습니까? 자바스크립트 할당문을 사용하면 됩니다. 비동기 과정에서 데이터를 변경하고 싶습니까? 새로운 도구는 필요 없으며 MobX 시스템이 변경사항을 찾아내고 사용 중인 곳에 전달합니다.
• 렌더링 최적화를 쉽게 할 수 있다.
  데이터의 모든 변경과 사용은 런타임에 추적되고 상태와 출력 사이의 모든 관계를 나타내는 의존 트리(dependency tree)를 만듭니다. 따라서 리액트 컴포넌트들처럼 상태에 따라 필요한 경우에만 연산이 실행됩니다. 그래서 memoization, selectors 등을 사용하여 컴포넌트 최적화 작업을 할 필요가 없습니다.
• 구조가 자유롭다.
  UI 프레임워크 밖에서 애플리케이션 상태를 관리 할 수 있습니다. 따라서 코드 분리가 쉽고 다른 곳에서 사용하기 유용하며 무엇보다 쉽게 테스트 할 수 있습니다.

 

 

 

블로그 예시 코드

 

npm install mobx mobx-react

 

 

counterStore.js

import { action, computed, makeObservable, observable } from 'mobx'

 

// 애플리케이션 상태를 모델링합니다.

export default class counterStore {

  count = 0;

 

  constructor() {

      makeObservable(this, {

        count: observable,

      isNegative: computed,

      increase: action,

      decrease: action

    })

  }

 

  get isNegative() {

      return this.count < 0 ? 'Yes' : 'No';

  }

 

  increase() {

      this.count += 1;

  }

  decrease() {

      this.count -= 1;

  }

}

 

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import counterStore from './counterStore';

const store = new counterStore();

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App myCounter={store} />

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

App.js

import './App.css';

import { observer } from "mobx-react";

 

function App({ myCounter }) {

  return (

    <div className="App" style={{ padding: "4rem" }}>

      카운트 : {myCounter.count}

      <br />

      <br />

      마이너스?: {myCounter.isNegative}

      <br />

      <br />

      <button onClick={() => myCounter.increase()}>+</button>

      <button onClick={() => myCounter.decrease()}>-</button>

    </div>

  );

}

 

export default observer(App);

 

myCounter로 받아서 액션과 state를 사용할 수 있는데 액션버튼을 누를때 state 반영된것이 바로 보이지 않는다.

이때는 구독이 필요한데 observer를 사용한다. mobx-react나 mobx-react-lite를 설치하자.

 

 

자동으로 구독

MobX에서 관리하는 observable 상태는 그 상태가 변경될 때마다 관련된 모든 구독자(observer)들에게 자동으로 변화를 알리고, 그에 맞추어 업데이트가 이루어집니다. React 컴포넌트를 observer로 감싸면, 해당 컴포넌트는 MobX 스토어의 observable 상태를 구독하게 되어, 상태가 변경될 때마다 자동으로 리렌더링됩니다.

 

 

MobX 를 reduxtoolkit 과 비교할때 장점.

• MobX는 상태 관리를 위한 코드를 간결하고 직관적으로 작성할 수 있습니다.
• observable로 만들어 상태를 관리하기 때문에, 초기 설정이나 구성이 비교적 간단합니다.
• 상태 변화를 감지하고, 그에 따라 자동으로 관련된 컴포넌트를 업데이트합니다.

 

---

Mobx로 카운터 앱 만들기(데코레이터 사용) [이전 버전]

... 생략

 

---

 

Decorator 문법이란?

JavaScript에서 @ 기호를 사용하여 클래스, 메서드, 프로퍼티 등에 추가적인 기능을 적용하는 문법

 

 

Webpack 은 또 뭔데... 

Webpack은 모듈 번들러(Module Bundler)로, JavaScript 애플리케이션을 위한 정적 모듈을 번들링하고 패킹하는 도구입니다.

https://js0616.tistory.com/242

 

 

최신 문법이라면 적용안되는 사이트도 많을까?