Mobx 기초 정리

1. Observable State - 바뀌는 부분 즉각 보임.

2. Computed - 계산이 필요한 부분에 적용

3. Reaction - 내부값 변환시 특정 log 호출

4. Actions - 상태에 변화를 일으킴

 

Redux는 단일 스토어지만 Mobx는 다중 Store를 사용한다.

Mobx에서는 State를 사용하지 않고 이를 observable이 대체한다.

class를 사용한다.

 

Provider로 index.tsx 내부를 감싸줘야 한다.

 

Provider useStore = {useStores} 

--> 이 스토어를 사용하겠다.

 

그리고 Container단과 스토어가 소통을 하고 있다면

Container 전체를 observer로 감싸줘야한다.

이런 식으로.(inject가 조금 더 안정성이 높다)

 

---------------사용후기

처음 mobx를 써봤는데, 실수가 꽤 있었다.

setTimeout으로 시간을 돌려가면서 하는 경우

어디서 초기화를 시키는지.. 그리고 async await를 적용시키는 부분이 헷갈렸다

container단에서 useEfeffct로 먼저 값을 불러와줬고

스토어에서 observable로 상태관리를 해주었다.

 

종종 observable에 변수를 넣지 않을 때가 있었는데, 이런 경우 반응이 늦게 왔다.

그래서 원인을 한참 전체 구조에서 찾다가..

생성자에서 async await를 사용해서 구현하다가..

생성자에서 서버관련을 두면 안된다 하셔서.. 바꾸고..

computedFn은 뭐고.. ㅋㅋ

 

그러했다.

그래도 스토어를 나누어서 깔끔하게 관리할 수 있기 때문에

프로젝트가 커질수록 더 잘 관리할 수 있을 것 같음