October 31, 2019

MobX observer

어제 MobX 버전을 V6로 올리면서 Observable 값을 가지고 있는 모든 컴포넌트에 observer를 사용하라고 적혀있던게 기억에나 내가 작성한 모든 컴포넌트에 해당 값을 추가하고 커밋을 했다. 그리고나서 퇴근하는 길에 "언제 observer를 사용해야 할까" 라는 생각이 들었다. Observable의 변경시 페이지를 재 렌더링 할 필요가 없는 페이지에도 이 함수를 사용하면 안될 것 같은 생각이 들었기 때문이다. 그런데 오늘 CTO님께서 회사 코드를 설명해주시면서 mobx에 대해서 얘기해주셨는데 궁금증이 바로 해결이 되었다. 말씀하신 내용은 mobx 공식문서에도 나와있는데 공식문서를 보고 배운게 아니라서 놓친것 같다. (여기서 공식문서 정독의 중요성을 다시한번 깨달았다.)

  • Observable 데이터의 변화가 생길때 재렌더링이 필요한 페이지일때 observer를 사용하자.
    (observer는 기본적으로 render 메소드에 autorun을 씌운 것이다보니, 조금만 잘못짜도 render가 비효율적으로 동작할 수 있게된다.)
  • 가능한 컴포넌트를 원자단위로 쪼개자
    (진짜 필요한 부분만 다시 렌더링하도록 만들어 렌더 비용을 낮출 수 있게 된다.)

Reference

MobX with React React에서 Mobx 경험기 (Redux와 비교기)