MobX

리덕스가 러닝커브가 높고, 처음부터 MobX를 적용해보고자 해서 리덕스 미들웨어를 보다가 재빠르게 손절하고 MobX로 넘어갔다.

근데.. MobX 자료가 너무 없오… (특히 hooks 나온 뒤로의 자료가 넘 없다… )

---

Mobx란

• 어플리케이션 상태 관리 라이브러리
• 반응형 프로그래밍 패러다임
• 파생될 수 있는 모든 상태는 자동으로 파생되어야 한다.
• 상태를 관찰가능(observable)하게 관리
• 액션 – (변경) –> 상태 – (파생) –> 반응
• 타입스크립트로 제작

출처

Understanding MobX vs Redux

Redux

• manual, 모든 걸 손으로 짜야함. 보일러플레이트 필요.
• test에 용이. (super predictable)

MobX

• automatic, observable value로 관리, 알아서 업데이트

출처

Ten minute introduction to MobX and React

1. state : 앱을 구성하는 객체, 배열, 값들의 구조(graph)

2. derivation : state에서 자동으로 연산될 수 있는 모든 값. 이 derivation 혹은 연산된 값은 완료되지 않은 todo의 숫자 같은 간단한 값부터 todo를 보여주는 비쥬얼 html 같이 복잡한 요소들도 포함한다. spreadsheet으로 생각하면 derivation은 앱의 공식(formula)과 도표(chart)라고 할 수 있다.

3. reaction : derivation과 매우 유사하다. 주된 차이는 이 함수들은 값을 생산하지 않는다는 것이다. 대신, 자동적으로 task를 수행한다. 주로 I/O와 관련된 작업들이다. reaction은 DOM이 업데이트 되었는지 확인하거나 네트워크 요청이 자동으로 올바른 시간에 만들어졌는지를 확인한다.

4. action : action은 state를 바꾸는 모든 것들이다. MobX는 action으로 발생된 모든 앱의 변화를 자동적으로 derivation과 reaction에 의해 프로세스 되도록 한다. 동기적으로, 글리치 없이(Synchronously and glitch-free).

출처

redux vs mobx 강좌 시작

• 리덕스 개발한 사람(댄 아브라보브? == Dan Abramov) -> 페북 들어가서 hooks 만듦
• 리덕스는 컴포넌트간 state 문제 해결하기 위해 나옴. 서로 간의 관계가 생겼을 때 처리하기 위해 리덕스
• 한 컴포넌트 내에서만 쓰는 건 그 내에서 state써도 됨
• store == 데이터 묶음
• state(store) -> action -> dispatch -> reducer -> state(store) 단방향 하면 기록이 다 남아서 에러 찾기 쉬움. 타임머신 기능.
• reducer에서 새로운 객체를 만들어서 store의 state를 새로운 객체로 덮어씀
  출처

그리고 뒤늦게 벨로퍼트의 MobX 강의도 있다는 것을 알았다….

MobX (1) 시작하기

– 그 외 참고한 사이트 –

1. Using MobX with React Hooks
2. React-native + Mobx inject 데코레이터 오류
3. Adding decorator support to Create React App projects using react-app-rewired
4. MobX 란? MobX 와 React