next.js와 MobX 및 hooks를 사용한 프로젝트에서 헤맨 과정의 일부이다.
MobX가 Redux와 같은 상태관리 라이브러리라는 사실은 알고 시작했지만 hooks로 사용하려니 너무 자료가 없었다.
대부분의 90% 이상의 예제들이 모두 class component로 작성되어 있어서 굉장히 힘들었다. 특히나 공식문서... ㅠㅠ
안 그래도 아는거 하나 없는 MobX를 class component로 작성된 예제를 보고 함수형 컴포넌트에 적용한다는 건 나한테는 난이도 있는 일이었다.
그런 중에 MobX에 저장된 값의 변화에 따라 re-rendering을 해야하는 일이 생겼다.
모든 input 창의 값이 들어가면 버튼이 활성화되는 기능을 구현하고 싶었다.
실패 List
1) useEffect 쓰기
: 당연하지만 실패했다. state로 관리되는 값이 아니라 store에서 들고오는 값을 확인해야하는데 이걸 useEffect의 두번째 인자인 의존성 배열에 넣는다고 해서 해결되지는 않았다.
2) autorun from mobx
: mobx에 autorun이라는 것이 있어서 적용해보았다. infinity loop에 걸려서 컴파일 에러가 났다.
그 외에도 여러가지를 적용해보았다.
결론적으로는 observer와 useObserver 둘 다 사용했어야 했다.
처음 함수형 컴포넌트를 사용할 때 useObserver만 쓰면 된다고 알고 있었는데다가 예제가 class형으로 되어있길래 observer를 간과하고 지나갔었다. 하지만 질문을 올리고 observer를 보는게 좋겠다는 답변을 듣고 찾아보고 적용하니 store의 값에 따라 re-rendering이 되는 걸 보았다.
import { useObserver, observer } from "mobx-react";
// 함수형 컴포넌트
const Tel = observer(function Tel() {
return useObserver(() => (
<Fragment>
JSX 내용
</Fragment>
));
});
export default Tel;