[Mobx] Mobx 와 객체

Mobx 는 다들 쉽다고 했다.
그렇지 않았다.

react 개발을 하며 자연스레 redux 를 써왔다.
mobx 는 튜토리얼을 따라하는 정도로 접해봤었다.
나쁘지 않은데 개념이 잘 안잡힌다는 느낌 정도를 갖고 있다가
hooks 가 나타났다.

hooks 는 굉장히 좋았다.

이런 흐름속에서 리액트를 객체 지향의 흐름으로 설계하기보다는 함수를 단위로 개발해 왔다.
그렇다고 함수형 프로그래밍을 구현하는 것도 아니었지만 그래도 따져보면 객체 보다는 함수에 더 가깝다고 생각한다.

그리고 개인적으로도 함수형 프로그래밍의 컨셉을 좋아하기도 하고, 흥미를 갖고 있었기에 그런쪽으로 더 관심을 두고 리액트를 그런 방식으로 조합하려 해왔다.

그러던 중에 새로 시작한 프로젝트에서 mobx 를 사용하기로 결정이 되어 공부를 시작하게 되었다.

역시 개념을 이해하는데 시간이 걸렸다.

먼저 어색하게 다가오는 것은 무언가가 정해져있다는 것이다. 이것은 프레임워크를 쓸 때의 느낌과 비슷한데 예를 들어 장고나 nestjs 같은 프레임워크같은 경우 정해진 큰 틀이 있고, 그것을 지키며 개발하게 된다. 그런 틀이 있으면 그것을 따르면 되기에 편한 것 같기도 하다가도 약간의 거부감을 느끼기도 했었다. 이 프레임워크를 위해 굳이 이것을 외우고 해야하나? 라는 생각이 들었기 때문이다. 그런데 장고에서 nestjs 로, 그리고 mobx 까지 보면서 느낀 것은 구조가 비슷하다는 것이다. 그리고 셋 다 객체를 중요하게 다룬다는 것이다. 그렇다는 것은 객체를 기반으로 설계될 경우의 보통의 흐름이 이렇다는 것이겠구나 라는 생각이 들면서 조금 더 집중해서 의욕을 갖고 공부할 수 있었다.

mobx 의 구조를 간단히 정리해 보면 다음과 같다.

(자세한 정보는 docs 와 React에서 Mobx 경험기 (Redux와 비교기) 를 확인하면 좋다. 특히 React에서 Mobx 경험기 (Redux와 비교기) 같은 경우에 spring 의 구조와 비교하며 정리한 방식이 이해하는데 도움이 되었다.)

Mobx

• State

Observable: - 관찰받는 값 (tracked value) - tracking 하고 change 하고 싶은 값에 observable 설정

• Action

Action: - setter - 뭔가를 하는 것 - excel 에서 값을 입력하는 것과 비슷 - http 메서드로 비교하면 put 같은 느낌

• Derivations

Computed: - getter - 값을 가져오는 것 - excel 에서 계산되어지는 값과 비슷 - http 메서드로 비교하면 get 같은
Reaction: — computed 와 비슷한데 computed 같이 새 값을 가져오는 것은 아니고 state 가 변경되 때 side effect 로써 작업을 수행함. — console 을 찍는거나 하는 등. — middleware 와 비슷환 느낌

• Store

State 와 Action, Derivations 값들을 포함한다. 큰 틀에서의 Service 와 비슷하다고 볼 수 있는 듯 하다.

• Model

Store 를 채우게 되는 요소들의 속성을 정의하게 된다. 즉, entity, dto 의 특성을 갖는다.

• Store 와 Model

예를들어 Store 에서 lists 를 다룬다면 Model 에서 list 에 대한 정의를 하게 되는 것이다.

• Repository

HTTP 통신과 같은 역할을 담당하게 된다.

아주 간단하지만 이 규칙을 잘 따르면 장점이 많다고 생각된다. 일단 자연스레 탄탄한 구조를 가질 수 있고, 팀으로 작업할 경우 서로의 코드에 대한 이해가 더 편해질 것이라고 생각한다. 이런식으로의 장점도 많을 테고, 또 좋았던 것은 blueprint 이다. 객체 지향의 기본적인 장점인 것 같은데 나는 이런식으로 개발해보지 않았어서 새로웠고, 좋았다. blueprint 가 그려지는 과정은 자연스럽다. 위의 구조를 따라 구성을 해가다보면 class 를 정의하고, Store 와 Model 을 구현해간다. 그러면 각각의 역할을 그리고 정리하며 정의해나가게 되고, 그런식으로 그린 설계안에서 개발을 진행하게 되는 것이다. 이런식으로 청사진을 그려가며 개발을 하는 것도 재미있고 의미있다는 것을 느끼게 됐다.

객체 지향은 뭔가 답답하다고 재미없을 것 같다고 생각해 왔던 내게 이번 mobx 공부는 객체 지향은 이런것일까 하는 생각과 함께 생각보다 재밌고 좋다는 생각을 할 수 있는 계기가 되었다.