Observable State
mobx에서 observable 을 만드는 방법은 세 가지가 있다.
- makeObservable
- makeAutoObservable
- observable
makeObservable
makeObservable을 사용하여 하나씩 notation하는 방법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { makeObservable, observable, computed, action } from "mobx"
class Doubler {
value // observable
constructor(value) {
makeObservable(this, {
value: observable,
double: computed,
increment: action,
fetch: flow
})
this.value = value
}
get double() { // copmuted
return this.value * 2
}
increment() { // action
this.value++
}
*fetch() { // flow
const response = yield fetch("/api/value")
this.value = response.json()
}
}
makeAutoObservable
makeAutoObservable은 모든 프로퍼티들을 추론하여 action, computed, observable 등을 정한다.
mobx 공식 레퍼런스에 따르면 추론 규칙은 다음과 같다.
- 모든 자신의 속성이 observable됩니다.
- 모든 getter가 computed됩니다.
- 모든 setter가 action됩니다.
- 프로토타입의 모든 기능 은 autoAction.
- 프로토타입의 모든 생성기 함수 는 flow. (일부 변환기 구성에서는 생성기 기능을 감지할 수 없습니다. 흐름이 예상대로 작동하지 않으면 flow명시적으로 지정해야 합니다.)
- false인수 에 로 표시된 멤버는 overrides주석 처리되지 않습니다. 예를 들어 식별자와 같은 읽기 전용 필드에 사용합니다.
makeAutoObservable을 사용하면, 코드가 더 짧아질 수 있다. 또한, 새로운 멤버가 추가되어도, makeObservable에 추가하지 않아도 되기 때문에, 관리하기도 쉽다.
아래 예제는 함수형으로 makeAutoObservable을 사용했지만, 클래스에서도 사용할 수 있다. 단, makeAutoObservable은 super를 갖고 있거나(상속받은 경우), subclass를 갖고 있는 경우(상속하는 경우)에는 사용할 수 없다.
1
2
3
4
5
6
7
8
9
10
11
12
13
import { makeAutoObservable } from "mobx"
function createDoubler(value) {
return makeAutoObservable({
value,
get double() {
return this.value * 2
},
increment() {
this.value++
}
})
}
observable
observable 메서드를 사용하면, 전체 object를 한 번에 observable로 만들어준다. observable이 되는 대상은 복제된 다음, 그 멤버들이 전부 observable이 된다.
observable이 리턴하게 되는 object는 Proxy가 된다. Proxy가 된다는 말은, 나중에 그 object에 추가되는 프로퍼티들 또한 observable이 된다는 뜻이다. 그러기에 공식 문서에서도 make(Auto)Observable 사용을 더 권장하고 있다.
observable 메서드는 배열, Maps, Sets와 같은 collection type과 함께 호출될 수 있다.
makeObservable과는 다르게, observable 메서드는 객체에 새로운 필드를 추가하거나 삭제하는것을 지원한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { observable } from "mobx"
const todosById = observable({
"TODO-123": {
title: "find a decent task management system",
done: false
}
})
todosById["TODO-456"] = {
title: "close all tickets older than two weeks",
done: true
}
const tags = observable(["high prio", "medium prio", "low prio"])
tags.push("prio: for fun")