MobX는 상태 관리 라이브러리 중 하나로, 애플리케이션의 상태를 쉽게 관리하고 업데이트하기 위한 도구입니다. MobX를 사용할 때 자주 쓰이는 기능 중 하나는 데코레이터(decorator)입니다. 이번 포스트에서는 MobX에서 자주 사용되는 데코레이터 기능에 대해 알아보겠습니다.
1. @observable 데코레이터
@observable 데코레이터는 MobX에서 가장 많이 사용되는 데코레이터 중 하나입니다. 이 데코레이터는 변수나 객체를 MobX의 관찰 대상으로 만들어주는 역할을 합니다. 상태가 변경되었을 때 MobX가 자동으로 관찰하고 업데이트할 수 있도록 해줍니다.
import { observable } from 'mobx';
class Store {
@observable count = 0;
@observable user = { name: "John", age: 25 };
}
위의 예제에서 count와 user 변수는 @observable 데코레이터를 사용하여 MobX의 관찰 대상으로 등록되었습니다. 이제 이 변수들의 값이 변경되면 MobX가 자동으로 업데이트하여 관련된 컴포넌트들에게 변경 사항을 전달합니다.
2. @computed 데코레이터
@computed 데코레이터는 계산된 값을 만들기 위해 사용되는 데코레이터입니다. 이 데코레이터를 사용하면 상태가 변경될 때마다 자동으로 계산된 값을 생성할 수 있습니다. 이러한 계산된 값은 MobX에서 자동으로 관찰되어 값이 변경될 때마다 관련된 컴포넌트들에게 업데이트를 전달합니다.
import { observable, computed } from 'mobx';
class Store {
@observable width = 10;
@observable height = 20;
@computed get area() {
return this.width * this.height;
}
}
위의 예제에서 area 메서드에 @computed 데코레이터를 사용하여 계산된 값을 만들고 있습니다. area 메서드는 width와 height 변수의 값을 곱해서 계산된 값을 반환합니다. 만약 width 또는 height 변수가 변경되면 area 메서드가 자동으로 호출되어 새로운 계산된 값을 생성합니다.
마무리
이번 포스트에서는 MobX에서 자주 사용되는 데코레이터인 @observable과 @computed에 대해 알아보았습니다. @observable 데코레이터를 사용하여 MobX에 관찰 대상을 등록하고, @computed 데코레이터를 사용하여 계산된 값을 만들 수 있습니다. 이러한 데코레이터들을 적절히 활용하면 MobX를 효과적으로 사용할 수 있습니다.