Mobx 사용 중 에러 해결기

음...
오늘 오후 내내 고생했던 이야기를 남겨본다.

현재 진행중인 프로젝트는 React와 Typescript, Mobx 를 사용하여 진행 중이다.

api를 공통으로 사용하는 페이지가 많아서,
공통 스토어를 두고 각 페이지에서 사용할 스토어들에서 상속을 받았다.

class SaleStore extends common {}
class PurchaseStore extends common {}

common 클래스에 있는 변수값만 각기 다르게 가지면 됐기에, 생성자를 통해 값을 넣어줬다.

export const storesContext = React.createContext({
  saleStore: new SaleStore(1),
  purchaseStore: new PurchaseStore(2),
  commonStore: new CommonStore(),
  authStore: new AuthStore(),
  sideMenuStore: new SideMenuStore(),
  dealStore: new DealStore(),
  clientsStore: new ClientsStore(),
  creditsStore: new CreditsStore(),
  productsStore: new ProductsStore(),
  systemsStore: new SystemsStore(),
  categoriesStore: new CategoriesStore(),
  brandsStore: new BrandsStore(),
  stocksStore: new StocksStore(),
  orderStore: new OrderStore(4),
  contractStore: new ContractStore(5)
});

export const useStores = () => React.useContext(storesContext);

그리고 각 페이지를 테스트 하는데,
왠걸? 스토어 하나를 돌려쓰는 것이었다.

뭐가 문제지?

첫번째 - 꼼수 사용. 스토어를 프로바이더에 넣기 전에 인스턴스를 다시 만들어서 넣어줌 - 실패
두번째 - 중앙스토어를 컨텍스트를 사용하는 방식으로 변경 - 당연히 실패

스택오버플로우에도 들어가보고, 레딧에 질문을 올리고, 깃허브에 이슈도 생성
레딧에서 착한분이 금방 댓글을 달아주셨는데..내가 올린 샘플코드가 문제 없이 잘 나온다고..

팀장님께 뭐가 문제인지 물어봤지만,
각기 새로운 인스턴스를 생성했는데 오버라이딩이 되는게 말이 안된다고..

결국 퇴근하고 집에와서,

세번째 - 그냥 다 까보자. 새로운 프로젝트를 만들고, 코드를 옮겨서 하나씩 다 지워나갔다.

그리고 찾은 원인!

store에서 내가 무슨 생각이었는지 모르겠지만 @computed 대신 @get을 아무런 의심없이 사용하고 있었다.
다른 스토어는 @computed를 사용했으면서...
후...이걸로 한 6시간 고민한 문제가 어이없이 해결됐다.

결론: 몹엑스 사용시 스토어에서 @get을 사용하면 클래스 상속이 제대로 안된다.

끗-