TIL 45 day MobX store의 값을 re-rendering 하는 방법

Winney·2020년 11월 28일
0

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;
profile
프론트엔드 엔지니어

0개의 댓글