MobX와 상태관리

1. 상태관리(State Management)란?

데이터를 관리하는 방법

데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일

네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일

 

 

2. MobX의 주요 개념

MobX는 react의 상태 관리 라이브러리이다. 

1) Observable state(관찰 받고 있는 "state")

state의 변경이 있으면 MobX에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악

 

2) Computed Value(연산된 값)

Observable state의 변화에 따른 값

이벤트 발생으로 인해 어떠한 연산에 필요로 하는 state에 변화 발생 시, 그 state변화에 따라 새로운 연산 작업 수행 > 만약 변화 없으면 기존 값 사용

 

3) Reactions (반응)

state가 바뀜에 따라 해야 할 일

 

4) Actions (행동)

state를 변경시키는 모든 것

state를 변화시키는 코드를 호출하면 Action

모든 Action이 끝난 다음에 Reaction이 나타남

 

 

3. MobX 사용

@observable

관찰할 변수 정의

 

@action

변수의 state가 바뀌는 함수를 표시

 

makeObservable

최신버전의 MobX에서는 @observable 보다는 makeObservable을 사용

    makeObservable(this, {
      stateTest: observable,  // MobX가 관찰할 State 
      actionTest: action,    // 상태의 변화를 일으킬 함수
    });
  }

 

 

 

참고

https://bit.ly/3L6HALU

https://helloinyong.tistory.com/175

https://joonfluence.tistory.com/473