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