React 에서 MVVM 하기

요새의 React 개발 경향은 functional component 로 hook 을 사용한 state 를 관리하는 것이다.
물론 redux 같은것도 있지만, 그것도 hook을 사용하는 추세다.

그렇다 보니 많은 state를 관리할 때 state를 관리하는 container component를 만들고 VIEW 는 그 하위에 컴포넌트를 두고 동작하게 만드는 것이 대부분의 best practice 더라.
COP(Component Oriented Programming) 인것이냐?

MVVM을 하고 싶은데, 그래서 state를 다른 곳에서 관리하고 업데이트 하고 싶은데, 업데이트 하면 자동으로 redraw 하고 싶은데.. 해서 삽질하다가 이렇게 만들어 봤다.

https://codesandbox.io/s/remote-state-wshq27

VM에서 state가 변경되면 hook의 dirtyState 가 업데이트 되면서 컴포넌트 리렌더링이 되도록 처리했다.

1. state 는 ViewModel 에 보관한다.
2. state 는 object로 화면에 필요한 값을 모두 갖고 있다.
3. VM 에서 state를 변경하려면 setState를 통해서 변경한다.
4. state가 변경되는 것을 VM이 리포트 받을 수 있다.
5. 컴포넌트의 lifecycle을 VM이 리포트 받을 수 있다.