@Observable

MobX는 기본적으로 관찰자 즉, Observer 패턴을 사용하고 있다. Observable의 뜻은 관찰이 가능한 대상을 의미한다. Observable을 이용해서 만들어진 value는 관찰이 가능한 상태로 바뀌게 된다. 이렇게 관찰이 가능한 value에 변화가 생기면 관찰하고 있는것이 다시 실행되게 된다.

 

두 가지 방식으로 씌여진다.

• Observable (<value>)
  • 데코레이터 없이 사용하는 방식
  • @ 없이, 함수처럼 hooks에서 사용해서 리턴한 객체를 사용한다.
• Observable (클래스의 프로퍼티)
  • 데코레이터로 사용하는 방식
  • 클래스 내부에 프로퍼티 앞에 붙여서 사용한다
  • 한 클래스 안에 여러개의 @observable 이 존재한다

Observable은 mobx에 들어있는 기능이기 때문에 mobx를 설치해주자

npm i mobx

// index.js
import { observable } from "mobx";

const isLogin = observable(true);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

observable 설정된 isLogin이 따른 값으로 변경하게 되면 Observer 하고 있던 로직이 재 실행된다.

 

확인해 보기 위해 observal 역할을 하는 autorun이라는 함수를 가져오자

// index.js
import { observable, autorun } from "mobx";

const isLogin = observable(true);
autorun(() => {
  console.log(isLogin);
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

콘솔로 출력해보면

observableValue라고 하는 객체가 나온다. 타이밍 상 보면은 observable이 먼저 실행되고 autorun이 실행되는걸 볼 수 있다. autorun이라는 부분은 최초에 설정될때 초기값들로 안에 있는 함수가 실행이 되는걸 알 수 있다.

// index.js
import { observable, autorun } from "mobx";

const isLogin = observable(true);
autorun(() => {
  console.log(isLogin.get());
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

.get()으로 찍어보면 실제 들어가 있는 값이 출력되는 걸 볼 수 있다.

이제 isLogin 값을 변경해 보자

isLogin.set(false)

첫 값은 true이고 값이 변경했을 때 다시 변경된 값이 콘솔로 나오는 걸 볼 수 있다.

 

이번에는 객체로 실제 데이터 값이 어떻게 나오는지 확인 해 보자

const person = observable({
  name: "Voyage",
  age: 29,
});

autorun(() => {
  console.log(isLogin.get());
  console.log(person.age);
});

person.age = 20;

처음에는 초기값이 나오고 두 번째로 true를 false로 바꿨으니 false와 age값이 나오고 마지막에는 age 값을 변경을 줬기 때문에 다시 한 번 autorun부분이 실행 되는 걸 확인 할 수 있다. 객체는 proxy를 사용하기 때문에 바로 프로퍼티에 다른 값을 설정했을 때 자동으로 autorun이 실행된다.

 

이번에는 observable을 데코레이터로 사용해서 observable 만들어보자. 데코레이터로 사용한다는 것은 클래스 혹은 클래스 안에 있는 것들의 데코레이터 설정을 해 주는 것이기 때문에 클래스로 만들어보자

class PersonStore {
  @observable
  name = "Mark";

  @observable
  age = 39;

  constructor() {
    makeObservable(this);
  }
}

const personStore = new PersonStore();

autorun(() => {
  console.log(isLogin.get());
  console.log(person.age);
  console.log(personStore);
});

콘솔을 찍어보면

이런식으로 클래스에서 observable 데코레이터를 달면 constructor에서 makeObservable을 해준다.