search

bluelion2 / Project-issue-repo

프로젝트를 진행하면서 있던 오류와 해결을 기록하는 repo
1 stars 0 forks source link

[Mobx] observable한 값을 어떻게 React Component에 적용할까 #34

Closed bluelion2 closed 3 years ago

bluelion2 commented 3 years ago

✨ What? 발견된 이슈 간단히 정리하기

📚 캡쳐한 사진들

Mobx에서 상태관리를 통해 값을 observable하게 관리하고 가져다 쓸 수 있다. React와 같이 쓴다면 어떻게 React Component가 알고 view에서 보여줄 수 있을까??

bluelion2 commented 3 years ago

mobx-react에서는 컴포넌트가 관찰가능한 값을 쓰기 위해서 observer function 을 제공해준다.
observer funtion 내부에서는, lite 버전인 mobx-react-lite를 가져다 쓰며, 내부적으로 제공하는 useObserver function, React.memo로 래핑한 뒤, 컴포넌트를 리턴해준다. code

bluelion2 commented 3 years ago

code

observer 내부에서 쓰는 useObserver hook이다. 주석으로 설명이 잘 되어있는데, 요약하자면 mobx - Reaction을 통해 변경되는지 감지하고, 변경되는 부분이 있다면 다시 그리게 해준다. useEffect에 도달했을떄, 변경해야한다면 강제 업데이트를 돌게 한다.

code

bluelion2 commented 3 years ago

var reactionTrackingRef = React.useRef(null);

reaction Tracking을 위한 ref를 만들고, useEffect의 내부에서 ref.current에 reaction을 추가해준다. 한번만 실행하며 unmount 될때에는 관찰을 끊어준다. (dispose)

code

bluelion2 commented 3 years ago

Mobx - Reaction

reaction() 과 Reaction() 두개를 지원함.

reaction

mobx - reaction guide

code

Reaction

code

아까 위에서 new Reaction()으로 주었을 때, 첫번쨰는 Reaction의 고유 이름, 두번째는 유효하지 않을때 실행시킬 함수 - forceUpdate(), option 등을 받는다.

globalState.trackingContext라는 전역에서 모든 관찰해야할 Reaction context리스트를 가지고 있으며, 등록과 동시에 관찰을 시작한다.