mobx : RECT를위한 간단하고 확장 가능한 상태 관리 솔루션

mobx는 특히 React에서 JavaScript 응용 프로그램을위한 인기있는 주 관리 라이브러리입니다. 중앙 집중식 상점 및 명백한 행동 파견에 의존하는 Redux와 달리 Mobx는 상태 관리에보다 반응적인 접근 방식을 취합니다. 상태가 변경 될 때 종속성을 추적하고 응용 프로그램의 필요한 부분 만 다시 렌더링하여 응용 프로그램의 상태 및 UI를 자동으로 업데이트합니다.

이 안내서에서는 Mobx의 주요 개념, React로 설정하는 방법 및 React 응용 프로그램에서 상태 관리에 효과적으로 사용하는 방법을 살펴 보겠습니다.

1. mobx는 무엇입니까?

Mobx는 응용 프로그램 상태를 관리하기 위해 반응 형 프로그래밍 을 활용하는 주 관리 라이브러리입니다. 상태에 의존하는 UI 부분을 자동으로 추적하고 업데이트하여 응용 프로그램 데이터를 관리하는 매우 효율적이고 직관적 인 방법입니다.

mobx의 주요 기능 :

• 자동 종속성 추적 : Mobx는 응용 프로그램의 어떤 부분이 어떤 상태에 따라 의존하는지 자동으로 추적합니다.
• 간단하고 직관적 인 : mobx를 사용하면 조치를 수동으로 파견하거나 상태를 업데이트 할 필요가 없습니다. Mobx는 상태 변경에 자동으로 반응합니다.
• 선언문 : mobx는 관찰 가능한 접근법을 사용하여 상태를 관찰 가능한 로 정의하고 상태가 변경 될 때 자동으로 재 렌더링됩니다.
• 성능에 최적화 된 : mobx는 변경된 상태에 의존하는 구성 요소 만 업데이트하여 최적화 된 성능을 초래합니다.

2. mobx의 핵심 개념

Mobx는 상태를 관리하기 위해 함께 작동하는 몇 가지 핵심 개념을 중심으로 구축되었습니다.

1. 관찰 가능한 상태

관찰 가능한 상태는 mobx의 핵심입니다. 객체가 관찰 가능한 로 표시되면 Mobx는 해당 객체의 상태를 추적하고 그에 의존하는 구성 요소를 자동으로 업데이트합니다.

예:

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

• 관찰 가능한 데코레이터는 카운터 객체를 반응성으로 만듭니다. 값이 변경 될 때 마다이 상태를 사용하는 REACT 구성 요소는 자동으로 재 렌더됩니다.

2. 행위

mobx의 동작은 상태를 수정하는 기능입니다. 협약별로, Mobx는 국가가 통제되고 예측 가능한 방식으로 업데이트되도록 보장하기 때문에 관찰 가능한 상태를 업데이트하는 데 사용되어야합니다.

예:

import { action } from 'mobx';

const counter = observable({
  value: 0,
  increment: action(function () {
    this.value  ;
  }),
  decrement: action(function () {
    this.value--;
  }),
});

• 증분 및 감소 방법은 작업 데코레이터를 사용하여 정의 된 작업입니다. 이 방법은 상태를 수정합니다.

3. 계산 된 값

계산 된 값은 관찰 가능한 상태에서 파생됩니다. 관찰 가능한 상태가 변경되면, 계산 된 값은 자동으로 다시 계산되어 응용 프로그램의 상태가 일관되게 유지되도록합니다.

예:

import { computed } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
  get doubleValue() {
    return this.value * 2;
  },
});

• DoubleValue는 값 관찰 가능한 값에서 파생 된 계산 된 값입니다. 값이 변경 될 때마다 DoubleValue가 다시 계산됩니다.

4. 반응

반응은 관찰 가능한 값이 변할 때마다 실행되는 부작용입니다. 반응은 상태 변경에 기반한 동작을 유발하는 데 유용합니다.

예:

import { autorun } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

autorun(() => {
  console.log(`Counter value is: ${counter.value}`);
});

• Autorun 함수는 카운터 값이 변경 될 때마다 자동으로 실행되는 반응입니다. 업데이트 된 카운터 값을 콘솔에 기록합니다.

3. Mobx를 React 와 통합

mobx는 앱 상태를 관리하기 위해 React와 완벽하게 통합됩니다. React에서 Mobx는 관찰자 고차 구성 요소를 사용하여 상태 변경을 추적하고 필요할 때 UI를 자동으로 업데이트하여 작동합니다.

1 단계 : Mobx 및 React-Mobx를 설치

React 응용 프로그램에서 mobx를 사용하려면 mobx 및 mobx-react를 설치해야합니다 :

npm install mobx mobx-react

2 단계 : 관찰 가능한 상점 만들기

응용 프로그램의 상태를 보유하는 상점을 만듭니다. 이 상점은 관찰 가능하며 구성 요소는 변경에 반응 할 수 있습니다.

예:

import { observable, action } from 'mobx';

class CounterStore {
  @observable value = 0;

  @action increment() {
    this.value  ;
  }

  @action decrement() {
    this.value--;
  }
}

export const counterStore = new CounterStore();

• Counterstore 클래스는 관찰 가능한 상태 (값) 및 동작 (증분 및 감소)을 정의합니다.

3 단계 : 반응 구성 요소 관찰자

React 구성 요소를 MOBX에 연결하려면 Mobx-React의 관찰자 고차 구성 요소를 사용해야합니다. 이렇게하면 관찰 가능한 상태가 변경 될 때 구성 요소가 자동으로 재 렌더링 될 수 있습니다.

예:

import React from 'react';
import { observer } from 'mobx-react';
import { counterStore } from './CounterStore';

const Counter = observer(() => {
  return (
    

      
Count: {counterStore.value}
       counterStore.increment()}>Increment
       counterStore.decrement()}>Decrement
    
  );
});

export default Counter;

• 카운터 구성 요소는 관찰자로 포장되어 카운터 우선의 변화에 ​​반응합니다. Counterstore.Value가 변경되면 새 값을 반영하도록 구성 요소를 자동으로 다시 렌더링합니다.

4 단계 : 응용 프로그램에서 상점을 사용합니다

이제 상점이 설치되고 구성 요소가 관찰자 포장되었으므로 응용 프로그램에서 매장을 사용할 수 있습니다.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import Counter from './Counter';
import { counterStore } from './CounterStore';

const App = () => (
  
    
  
);

render(, document.getElementById('root'));

• 제공자 는 스토어를 응용 프로그램에 주입하는 데 사용됩니다. 카운터 구성 요소는 이제 카운터 스ore에 직접 액세스 할 수 있습니다.

4. mobx 사용의 장점

1. 간단

mobx는 상태를 쉽게 관리 할 수 ​​있도록하여 Redux와 같은 다른 주 관리 라이브러리에서 일반적으로 발견되는 보일러 플레이트와 복잡성을 줄입니다.

2. 자동 재 렌더링

상태가 변경되면 Mobx는 해당 상태에 의존하는 구성 요소의 렌더링을 자동으로 처리합니다.

3. 세분화 된 관찰 가능성

mobx는 상태가 변경 될 때 필요한 구성 요소 만 재 렌더링되어 성능을 향상시킵니다.

4. 선언적 국가 관리

mobx를 사용하여 상태는 선언적으로 관리됩니다. 주가 어떻게 행동 해야하는지 정의하면 Mobx가 나머지를 처리합니다.

5. 결론

Mobx는 반응성 프로그래밍 원칙을 사용하는 강력하고 효율적인 상태 관리 라이브러리입니다. 간단한 설정 및 자동 상태 추적으로 React 애플리케이션의 상태를 훨씬 쉽게 만들 수 있습니다. Mobx는 특히 업데이트 및 성능 최적화에 대한 세밀한 제어가 필요한 응용 프로그램에 특히 도움이됩니다.

복잡한 React 응용 프로그램을 구축하고 이해하기 쉬운 상태 관리 솔루션을 원한다면 Mobx는 훌륭한 선택입니다. 직관적이고 강력하며 최적화 된 개발 경험을 제공하기 위해 React와 완벽하게 작동합니다.