MobX는 상태 관리 라이브러리로, React와 함께 사용할 때 효율적인 코드 작성을 도와줍니다. MobX는 간단하고 직관적인 API를 제공하여, 복잡한 상태 관리를 간단하게 처리할 수 있습니다. 이번 블로그 포스트에서는 MobX를 사용한 효율적인 코드 작성 방법에 대해 알아보겠습니다.
1. Observables
MobX에서는 @observable 데코레이터를 사용하여 상태를 관찰 가능한(observable) 상태로 만들 수 있습니다. 예를 들어, counter라는 상태를 관찰 가능한 상태로 만들고 싶다면 다음과 같이 작성할 수 있습니다.
import { observable } from 'mobx';
class CounterStore {
@observable counter = 0;
}
이렇게 정의된 CounterStore 클래스의 counter 속성은 관찰 가능한 상태가 되어, 상태 변경이 감지될 때 자동으로 업데이트됩니다.
2. Actions
상태 변경을 수행하는 메소드는 action으로 선언되어야 합니다. action은 MobX의 내부 추적 및 최적화를 위해 사용됩니다. action 데코레이터를 사용하여 메소드를 action으로 지정할 수 있습니다. 예를 들어, increase 메소드를 작성하고 싶다면 다음과 같이 작성할 수 있습니다.
import { observable, action } from 'mobx';
class CounterStore {
@observable counter = 0;
@action increase() {
this.counter++;
}
}
increase 메소드는 counter 상태를 변경하는 액션으로, 상태 변경을 추적하고 업데이트할 수 있도록 해줍니다.
3. Computed Values
computed 데코레이터를 사용하여, 상태의 계산된 값을 만들 수 있습니다. computed 값은 의존하는 상태가 변경될 때마다 캐싱되고 업데이트됩니다. 예를 들어, isEven이라는 계산된 값을 만들고 싶다면 다음과 같이 작성할 수 있습니다.
import { observable, computed } from 'mobx';
class CounterStore {
@observable counter = 0;
@computed get isEven() {
return this.counter % 2 === 0;
}
}
isEven은 counter 상태에 의존하는 계산된 값으로, counter가 변경될 때마다 새로 계산되어 업데이트됩니다.
4. React와 함께 사용하기
MobX는 React와 함께 사용할 때 더욱 강력한 도구가 됩니다. mobx-react 패키지를 사용하여 MobX 상태를 React 컴포넌트와 연결할 수 있습니다. 예를 들어, CounterStore를 사용하는 Counter 컴포넌트를 작성하고 싶다면 다음과 같이 작성할 수 있습니다.
import React from 'react';
import { observer } from 'mobx-react';
const Counter = observer(({ counter, increase }) => {
return (
<div>
<p>Counter: {counter}</p>
<button onClick={increase}>Increase</button>
</div>
);
});
export default Counter;
observer로 래핑된 컴포넌트는 MobX 상태가 변경될 때마다 자동으로 업데이트됩니다.
결론
MobX를 사용하면 React 애플리케이션의 상태 관리를 더욱 간단하고 효율적으로 할 수 있습니다. observable, action, computed와 같은 MobX의 기능을 활용하여 상태를 관찰 가능하게 만들고, 상태 변경을 추적하여 업데이트하는 코드를 작성할 수 있습니다. 또한, MobX와 React를 함께 사용하면 상태 관리와 UI 업데이트가 자동으로 처리되어 개발 생산성을 향상시킬 수 있습니다.