최근 SPA(Single Page Application)로 구현하는 웹 서비스가 많아졌다. SPA로 구현한 서비스는 한 화면 내의 여러 컴포넌트들에서 동일한 데이터로 동기화해야 하는 이슈가 생겼다. SPA로 서비스를 구현하면서 생긴 데이터의 상태 이슈를 관리하기 위한 도구가 State Management 도구다. MobX ? MobX 는 공식 홈페이지에 들어가면 아주 심플하게 설명이 나와있다. Simple, scalable state management 쉽게 말해서 State Management 도구다. MobX의 큰 특징은 Observable을 이용해 변수의 변화를 추적할 수 있도록 만든다. 그리고 이 변수에 변화가 생기면 미리 정의한 액션을 트리거한다. Observable, Reactions observable은 위에도 설명했지만 변수를 state로 승격한다고 생각하면 된다. Mobx는 state 변수의 값의 변화를 Reactions에서 감지해서 처리할 수 있다. Reactions autorun reaction when 각 reactions의 특징을 예제와 함께 살펴보자. Autorun autorun은 하나의 함수를 파라미터로 받는다. 함수 내부에서 참조하는 observable 변수에 변화가 생기면 파라미터로 넘긴 함수를 실행한다. User 클래스의 name 앞에 observable 데코레이터를 붙였다. 이렇게 하면 name에 변화가 있을 때 이를 추적할 수 있게 된다. 10번 줄을 보면 autorun 내부에서 user.name을 통해 observable 변수인 name에 접근하고 있다. 그리고 13번 줄에서 name에 "Caeml"이라는 값을 할당한다. name에 변화가 생기면서 autorun으로 넘긴 함수가 실행된다. console에는 결과가 Hello, Camel이라고 찍히게 된다. 그런데 실제 결과에 약간의 문제가 있다. ...