MobX 상태 관리 라이브러리

MobX란?

• 전역 상태 라이브러리
• 모든 상태 변화가 일어나는 부분을 자동으로 추적해주는 역할
• 유지보수가 쉬워지도록 상태 로직을 분리하여 모듈화할 수 있음
• 상태 관리의 단계를 간결하게 해줌

 

MobX 특징

• React에 종속적인 라이브러리가 아님
• redux와 다르게 store에 제한이 없음
• 절대적으로 필요한 경우에만 state 변경
• Typescript를 기반으로 만들어짐

 

기본 동작 원리 및 개념

상태를 변경하기 위한 action이 발생하면 observable(상태)가 update되고, 상태가 변경되었음을 notify해서 필요에 따라 연산된 값(compute values)을 계산하거나 적절한 reaction(반응)을 수행한다.

• action이 state를 변경하는 단방향 데이터 흐름을 사용
• 영향을 받는 모든 view를 업데이트

 

주요 요소

• action : 상태에 변화를 일으키는 것
• makeObservable : observable을 만드는 방법

constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action,
            fetch: flow
        })
        this.value = value
    }

• observable : 관찰 받고 있는 상태
• computed value : 연산된 값