react 리액트 MobX로 상태관리 하기 Store, observable, action, computed

리액트를 사용할때 상태관리를 하기위해서는 기본적으로 리액트에서 제공하는 Hook기능이 있지만, 각 컴포넌트간에 상태를 공유하며 사용하기위해서 MobX를 사용하게 되었다.

 

Mobx란?

MobX는 functional reactive programming을 투명하게 적용함으로써 상태 관리를 쉽고 확장성 있게 만들어주는 검증된 라이브러리입니다. 

MobX가 말하는 MobX의 장점은 쉽다, 렌더링 최적화를 쉽게 할 수 있다, 구조가 자유롭다 입니다.

 

MobX는 action이 state를 변경하는 단방향 데이터 흐름을 사용하여 영향을 받는 모든 view를 업데이트합니다.

1. state가 변경되면 모든 derivation이 자동으로 그리고 원자 단위로 업데이트됩니다. 결과적으로 중간 값을 관찰할 수는 없습니다.
2. 기본적으로 모든 derivation은 동기식으로 업데이트 됩니다. 이는 action이 state를 변경한 직후에 computed 값을 안전하게 검사할 수 있음을 의미합니다.
3. computed 값은 느리게 업데이트됩니다. 활발히 사용되지 않는 계산된 값은 부수효과(I/O)에 필요할 때까지 업데이트되지 않습니다. 만약 view가 계산된 값을 사용하지 않으면 가비지가 자동으로 수집됩니다.
4. 모든 computed 값은 순수해야 하며 state를 바꾸면 안 됩니다.

 

시작하기

MobX는 React와 독립적으로 작동하지만, 일반적으로 React와 함께 사용합니다.
MobX를 사용하기 위해서는 npm install을 사용하여 설치하면 된다.

npm install mobx mobx-react

 

Store

MobX는 Store를 만들어 사용한다.

Store는 보통 src의 stores 폴더안에 두고 관리는 하는게 관리하기에 좋다.

import { observable, action, computed, makeObservable } from "mobx";

class CounterStore {
  constructor() {
    makeObservable(this, {
      count: observable,
      setCount: action,
      isCountValid: computed,
    });
  }
  count = 0;

  setCount(data) {
    this.count = data;
  }

  get isCountValid() {
    return this.count !== 0;
  }
}

const counterStore = new CounterStore();

export default counterStore;

스토어에는 observale, action, computed가 존제합니다.

count는 상태라고 표현하고, observable은 observer로 감시가 가능한 변수입니다.

setCount는 action으로 상태를 변경시키는 메서드입니다.

isCountValid 는 computed로서 observable 값이 변경될 때 자동으로 재계산됩니다.

 

MobX의 makeObservable 함수는 MobX 6.0.0 버전에서 처음 도입되었습니다. 이 함수는 MobX 클래스의 속성들을 감시 가능한 상태로 만들고, 액션 및 계산된 속성을 설정하기 위해 사용됩니다. 이전 버전의 MobX에서는 @observable, @action, @computed 데코레이터를 사용하여 같은 작업을 수행했지만, MobX 6부터는 makeObservable 함수가 이러한 데코레이터를 대체하는 방식으로 사용되기 시작했습니다.

 

observable

observable은 MobX에서 사용되는 데코레이터 또는 함수로, 상태 관리를 위한 중요한 도구입니다.

JavaScript 객체나 클래스의 속성을 observable로 선언하면 해당 속성의 변경 사항을 감시하고, 변경이 감지되면 자동으로 관련된 컴포넌트나 함수를 업데이트하여 반응형 애플리케이션을 구축하는 데 사용됩니다.

데이터의 상태 변화를 간편하게 관리하고 UI와 데이터 사이의 일관성을 유지할 수 있습니다.

 

action

action은 MobX에서 상태 변경을 수행하는 메서드에 적용되는 데코레이터 또는 함수입니다.

action으로 감싼 메서드 내에서 상태 변경이 발생하면 MobX는 이를 자동으로 감지하고, 관련된 모든 observable 및 computed 값에 대한 변경을 추적하여 이에 따른 뷰 갱신을 수행합니다.

이를 통해 코드의 가독성을 향상시키고, 상태 변화에 대한 예측 가능한 방식으로 상호작용하는 애플리케이션을 구축할 수 있습니다.

action은 애플리케이션의 상태 관리를 단순화하고, MobX의 핵심 기능 중 하나로서 상태 변화를 추적하고 반응적으로 처리하는 데 중요한 역할을 합니다.

 

computed

computed는 MobX에서 사용되는 특별한 종류의 변수로, 다른 상태 데이터(observable)로부터 파생된 값을 자동으로 계산하고 캐싱하는 역할을 합니다.

코드를 간결하게 유지하고 성능을 최적화할 수 있으며, computed가 의존하는 데이터가 변경될 때만 자동으로 재계산되므로 효율적으로 상태를 관리할 수 있습니다.

읽기 전용이므로 읽기와 쓰기를 분리하여 코드를 더 안정적으로 만들고 데이터의 일관성을 유지할 수 있습니다.