[FE] MST란? React_MobX State Tree

 

 

🔖 MST = MobX State Tree

👉 React 앱에서 “전역 상태(공용 데이터)”를 관리하기 위한 도구

 

앱 전체에서 쓰는 데이터를

• 규칙(타입) 있게
• 안전하게
• 예측 가능하게 관리

 

🔖 사용 이유

useState는 컴포넌트에서만 사용하는 것이 좋고 페이지 전체(전역) 내에서 사용하려면 MST를 사용

(다른 것도 있으나 MST를 많이 쓴다고 함 => 현재 프로젝트에서도 MST 사용하고 있음)

 

ex) 회사 로고, 로그인 정보, 사용자 정보

• 여러 페이지에서 공통 사용
• 새로고침 전까지 유지되어야 함
• 누가 언제 바꿨는지 추적해야 하는 데이터

👉 이런 건 useState로 관리하기가 힘들기 때문에.

 

🔖 특징

1. 타입이 있다

=> 버그를 막아줌

logoBase64: types.string

 

2. 마음대로 수정 불가 (Action만 가능)

=> “누가 언제 데이터를 바꿨는지” 명확해짐

Action 안쓰고 수정했을 시 에러[mobx-state-tree] Cannot modify ... object is protected

❌ 불가 ❌
company.logoBase64 = 'xxx'


⭕ 가능 ⭕
actions(self => ({
  setLogoBase64(value) {
    self.logoBase64 = value;
  }
}))

 

3. React랑 자동 연결됨 (컴포넌트가 자동으로 다시 렌더링)

=> logoBase64 바뀌는 순간 이미지 src 갱신

<img src={`data:image/png;base64,${company.logoBase64}`} />

 

🔖 사용 구조

const Company = types
  .model({
    logoBase64: types.maybe(types.string),
  })
  .actions(self => ({
    setLogoBase64(value) {
      self.logoBase64 = value;
    }
  }));

 

 

model → 데이터 구조 정의

types.xxx → 타입 규칙

actions → 데이터 변경 허용 구역