Mobx

김승훈·2021년 7월 25일

mobx

React

목록 보기

13/14

MobX는 전역 상태 관리 라이브러리다. 모든 상태변화를 일어나는 부분을 자동 추적해주는 역할을 한다. Redux와 주로 비교 되고는 한다.

특징

React에 종속적인 라이브러리가 아님
아키텍처나 상태 컨테이너가 아닌 라이브러리
redux와 다르게 store에 제한이 없음
또한 redux에서 해줘야했던 action 선언, connect, mapStateToProps, mapDispatchToProps등 번거로운 작업들은 데코레이터로 간단하게 대체
observable을 기본적으로 사용하고 있음
Mobx는 절대적으로 필요한 경우에만 state 변경
Typescript를 기반으로 만들어짐

핵심개념

observable: 추적 가능한 state 정의
action: state를 변경하는 메소드
computed: state와 캐시로부터 새로운 결과를 반환

observable

observable은 makeObservable, makeAutoObservable 그리고 observable 이 세 가지가 있으며, 모두 추적 가능한 상태의 state로 만들어준다.

makeObservable은 주로 class의 this와 많이 사용된다.

makeAutoObservable은 makeObservable와 거의 비슷하지만, class에서 super나 subclassed가 있을 경우 사용할 수 없다.

make(Auto)Observable와 observable의 가장 큰 차이점은 전자는 들어온 인자로 들어온 object를 바로 변경하지만, 후자는 클론을 하고 observable하게 만든다는 점이다. 또한 observable는 Proxy object를 생성한다. (추후 보완..ㅠㅠ) 따라서 공식 문서에서도 make(Auto)Observable 사용을 권장하고 있다.

action

action은 state를 변경하는 것을 뜻한다. makeObservable을 사용하면 action을 따로 작성해줘야 하지만, makeAutoObservable은 이를 대신해준다. 밑에 코드에서 두 가지 방식 모두 사용해 볼 것이다.

computed

computed values(계산된 값)는 다른 observable들에서 어떠한 정보를 도출하는데 사용할 수 있다. 이렇게만 봐서는 뭔지 모를 수 있는데 밑의 예시를 통해 같이 살펴보자.

장점

객체지향적이다.
Es6에서 추가된 이름뿐인 class가 아닌 객체지향적으로 사용하고 개발하는 것을 권장.
서버개발자들에게 친숙한 아키텍처
데코레이터
Decorator는 Mobx의 구조를 이루는 것 중 하나라기보다는 일종의 문법적 설탕입니다. Decorator를 사용하여 적은 양의 코드로 store를 컴포넌트에 주입할 수 있고, 감시할 대상 state를 설정할 수도 있습니다.
캡슐화
Mobx Configuration 설정으로 State를 오직 메소드를 통하여 변경할 수 있도록 Private하게 관리 할 수 있다.

자바스크립트는 접근제어자를 제공하지 않아 데이터 핸들링 비즈니스 로직이 퍼져버리고 사이드 이펙트가 발생할 확률이 높고 관리하지 않으면 번잡스럽 코드가 생산되기 쉽다.

하지만 접근제어자가 없다고 해도 캡슐화를 구현할 수 있는 방법들이 있긴하지만 잘 활용되어 지지는 않습니다.

Mobx는 Configuration에서 옵션 한줄로 state의 변경은 해당 클래스의 메소드를 통해서만 변경할 수 있도록 할 수 있고

도메인 모델간의 message를 통한 상호작용 코드 패턴을 유지해 나갈 수 있도록 해줍니다.