MobX Modifiers란? observable shallow,ref,deep

MobX Modifiers

MobX Modifiers는 observable 프로퍼티의 변화에 대한 행동을 정의 하는 역할을 한다.

observable

• observable 프로퍼티의 깊이를 정하는 Modifier deep, shallow, ref 등이 있다.

observable.deep

observable의 기본 동작 modifier. 모든 depth 를 observer 한다.

객체를 깊이 관찰 가능하게 만드는 데 추가 노력이 필요하지 않다.

• 편하다 개꿀 👍

@observer
class Model extends Component {
  @observable 
    user = {
    name: "myName",
    friends: [{ name: "firendName" }]
  };
    @action
  editUser = () => {
        //감지 => 렌더링
    this.user.friends[0].name = "newFriendName";
        //감지 => 렌더링
        this.user.friends.push({ name: "newFriendName" + i });
  };
}

Reference observability

• deep과 달리 object가 전부 observable이 필요가 없는 경우.
• object의 불변성이 유지 되는 경우.
• object 상태가 다른 라이브러리에 의해 관리 되는 경우

observable.ref

• object 자체가 아닌 객체의 참조만을 observable 하게 만듬

@observable.ref
user = {
  name: "myName",
  friends: [{ name: "firendName" }]
};
@action
editUser = async () => {
  // 참조가 유지 되기 떄문에 감지 되지 않는다
  this.user.friends[0].name = "newFriendName";
  // 참조가 변경 되서 감지 => 랜더링
  this.user = {...this.user}
};

Shallow observability

• 1단계 뎁스에 대한 단계까지 (one-level-deep) observable 값으로 합니다.
• observable 값들에 대한 collection에 사용
• 예를들어 collection에 추가되는 값은 observable이 되지만 해당 객체 내부 프로퍼티는 observable 로 생성하지 않음

observable.shallow

@observable.shallow
users = [{ name: "firendName" }];

@action
editUser = async () => {
  // 감지 안됨
    this.users[0].name = "changeName";
  // // 감지 됨
  this.users.push({ name: "newUser" });
};

 

 

 

 

 

 

 

 

 

 

참고

https://doc.ebichu.cc/mobx/refguide/modifiers.html

https://www.mobxjs.com/refguide/modifiers.html

https://javascript.plainenglish.io/list-of-mobx-modifiers-d266b9957ec6