04_MobX

MobX는 리액트에서 상태관리를 편하게 하기 위해서 프로젝트에 도입하였다.

Redux, Hooks의 Context API와 비교되는 점은 

MobX는 우선 러닝커브가 매우 적다!

그리고  객체지향 프로그래밍 패러다임에서 크게 벗어나지 않은 개발 방법이다!

마지막으로 decorator를 통해 매우 쉽게 컴포넌트들에 적용이 가능해진다.

(이 decorator 설정이 쉽지만은 않았지만 설정하고 나니 코드가 한껏 간결해짐을 느꼈다)

 

하지만 실제 사용되는 것은 redux가 훨씬 많고, 현업에서도 redux가 많이 사용되는것으로 알고있다.

그러므로 redux도 반드시 나중에 공부하여 내것으로 만들어야 할 것이다!!(큰바람...!)

 

 

 

Observable을 통해 ReRender!!!

Mobx에서 Rerendering 대상이 되는 state(상태, 값)를 관찰 대상(observable value)라고 칭하며 @observable 

데코레이터로 지정한 State는 관찰대상으로 지정되고 그 State는 값이 변경될 때 마다 Rerendering 된다.

이것이 사실 Mobx가 동작하는 가장 기본 개념

 

MobX에서 가장 인상깊었던 부분이다. store에서 state를 관리하고 그 state를 데코레이터로 observerable하고나면 그 state가 변경됨에 따라 리렌더링이 된다.

 

이러한 방법은 리액트 컴포넌트 내에서 state관리를 안해주어도 리렌더를 할 수 있게 되었다.

또한 store에서 사용한 state는 다른 컴포넌트에 자유롭게 넣어 줄 수도 있었다!

 

추가적으로 state관리를 안하게 되니 class컴포넌트를 사용하지 않게 되고, 모두 functional 컴포넌트로 사용할 수 있었다.

 

우리 프로젝트에서 functional한 컴포넌트가 가지는 이점은 hooks를 사용하고, apollo hooks를 사용할 수 있게 되었다.

 

즉, apollo, MobX, Hooks 이 3가지를 가져갈 수 있게 되었다는 것이다!!!

 

이렇게 프로젝트 진행을 위한 컴포넌트셋팅, 아폴로셋팅, MobX셋팅이 끝이 났다.

이제 신나게 프로젝트를 진행할 일만 남았다!

 

추가)
MobX에 대한 내용이 부족하다. pomodoro_MobX에서 조금 더 자세하게 내용을 다루었다.
https://hyobi.tistory.com/116?category=386370

02_MobX