MobX(1) - observable, reactions

 

 최근 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이라고 찍히게 된다. 그런데 실제 결과에 약간의 문제가 있다.

name을 초기화할 때 빈 문자열을 넣었던 것도 autorun에서 감지돼서 console에 결과가 나타났다. 즉 autorun은 모든 name 변화에 반응하게 돼있다.

Reaction

autorun이 초기화를 포함한 모든 단계에 반응한다면, reaction은 초기화 이후 변화부터 반응한다.

reaction은 파라미터 두 개를 받는다. 첫 번째 파라미터는 반응해야 할 observable 변수를 반환하는 함수다. 우리는 user.name에 반응해야 하기 때문에 user.name을 반환하는 함수를 넘겨줬다. 두 번째 파라미터는 첫 번째 파라미터 함수에서 반환한 observable 변수를 파라미터로 받아서 값을 처리할 함수다.
autorun에 넘겨주는 함수와 차이점은 파라미터로 받는 observable 값이 있느냐 없느냐 하는 부분이다.

초기화 단계의 빈 문자열은 무시하고 초기화 이후 변화부터 감지해서 console에 출력해준다. 이렇게 reaction을 이용해서 불필요한 초기 변화를 제외하고 의미있는 변화에 대해서 처리하도록 할 수 있다.

When

when은 파라미터로 함수 두 개를 받는다. 첫 번째 함수는 Boolean 값을 반환 한다. 첫 번째 함수의 반환 값이 true가 되는 순간, 두 번째 함수가 단 한번만 실행되고 이후 변화에는 반응하지 않는다.

10번 줄에서 user.name의 값이 빈문자열이 아닐때 true를 반환한다. 이 때 console에 이름을 출력하게 된다. 16번 줄에서 'Camel'을 할당하고 출력하므로 17번 줄에서 할당한 'Caramel'에는 반응하지 않게 된다.