MobX | 주요 개념 알아보기

글의 목적

회사에서 고객별로 인테리어 서비스 견적을 통합 관리하는 백오피스를 개발하며,

모든 페이지마다 필수적으로 필요한 고객 정보를 어떻게 관리하면 좋을지 고민하게 되었다. 

가장 익숙한 방법인, 최상단에서 state로 관리할까 생각하니 떠오른 이미지는. .

 

 

폭포수같이 쏟아지는 Props의 향연

 

페이지와 컴포넌트의 수가 꽤나 많기에 state로 관리하기엔 위 사진처럼 너무나 많은 Props가 생겨날거라 생각했고, 이는 개발 방향이 객체지향과 너무나 동떨어진 구조로 흘러가 결국 낮은 유지보수성을 가져올것이라 판단했다. 때문에 컴포넌트와 상태 업데이트 로직을 분리하는 전역 상태 관리를 선택하게 되었다. 

 

전역 상태 관리를 해본 적이 없어 팀원분들과 상의를 해보았는데, 상대적으로 러닝커브가 낮고 회사 코드 중 이미 일부분에 사용되고 있어 흐름을 참고할 수 있는 MobX를 사용하기로 했다. 기존 코드를 분석하고 응용해나가며 나의 부분도 개발을 마쳤지만 이대로 넘어가기에는 아직 MobX와 꽤 거리가 있다.  그 간극을 좁혀나가기 위해 우선 이론 위주로, 하지만 내 언어로 정리해보는 글.

주로 React와 함께 쓰이기도 하고, 예제도 React를 함께 활용해서 작성할 것이기 때문에 React 카테고리에 넣어 적는다.

---

What is MobX?

한 마디로 말하면, 상태 관리를 도와주는 라이브러리. 

또다른 인기 상태 관리 라이브러리 Redux와 달리 데코레이터를 제공하므로 복잡한 보일러플레이트 코드 등이 필요치않다.

MobX 주요 개념

 

Action에 따라 State에 변화가 생기면, Computed values와 Reactions으로 처리되게 된다.

State (Observable State)

MobX에게 끊임없이 관찰당하는 상태. (변화가 일어나면 MobX는 어떤 부분에서 변화가 일어났는지까지 알 수 있다.)

상태가 변할 경우 Computation과 Reaction을 일으킨다.

 

Computed Values (Derivations)

State가 update됨에 따라 계산되는 값 (연산된 값).

(Derivations, 즉 파생값이라고도 불리지만 개인적으로는 Computed values(연산된 값)이라는 명칭이 더 가깝게 느껴진다.)

연산을 할 때 그 값이 바뀔때만 새로 연산하고, 그대로라면 기존의 값을 사용하도록 해준다. 필요한 경우에만 연산을 진행하므로 성능 최적화를 위해 쓰인다.

예를 들어 고객의 인테리어 총 견적금액을 리턴하는 함수 getTotalPrice() 가 있다고 해보자.

A고객이 이 함수를 통해 연산된 1000만원의 견적 금액을 가지게 된다면, 
이후 A고객의 견적금액을 필요로 할 때 다시 연산할 필요 없이 1000만원을 바로 사용할 수 있다. 
만약 인테리어 시공이 하나 더 추가된다면 연산을 다시 진행하게 된다.

Reactions

State가 update되면 해야되는 일을 정의하는 것.

State의 변화에 따른다는 점에선 Computed Value 와 유사하지만 Computed Value는 특정 값 연산을 위해 사용되고 Reactions는 값이 바뀌면 해야 되는 일을 정하므로 값을 생성하지 않는다는 차이가 있다.

예를 들어 고객 정보를 가지고 있는 State 값에 변화가 일어나면 
alert으로 '고객 정보가 ~로 변경되었습니다.'라고 알려주는 함수를 호출하는 것

Actions

State에 변화를 일으키는 모든 것.

위 그림을 보면 Action에 따라 State에 변화가 생기고, 이 변화는 자동으로 Computed values와 Reactions으로 처리되게 되는데,

따라서 MobX는 단방향으로 흘러가는 구조를 가지고 있다. 

---

참고 학습자료
React에서 Mobx 경험기 (Redux와 비교기) - 우아한 형제들 기술블로그
Ten minute introduction to MobX and React