Angular나 Vue나 React나.. 컴포넌트는 부모와 자식이라는 관계를 통해 property 를 전달하고, event 를 통보받으면서 소통(커뮤니케이션) 한다.
직접적인 부모 자식 관계가 아니라도, 가령 할아버지나 고조할아버지쯤 되는 컴포넌트 라면, 혹은 할아버지가 같은 사촌 정도 되는 컴포넌트 라면, 공통 조상이 되는 컴포넌트에 데이터를 선언하고, 데이터 변경을 통해 서로 통신을 시도 하는 것이 일반적이다.
이런 과정이 번거로운 경우에는 redux(vuex) 를 사용해 SPA 내에서는 global 한 데이터의 상태관리 기법을 통해 데이터의 변경이라는 방식으로 서로 소통을 한다.
그런데, Angular 는 redux를 사용하지 않고, 비슷한 개념의 Ngrx 를 사용한다.
하지만, store 를 사용하는 것이 능사는 아니다.
데이터의 관리를 어렵게 하기도 하고, 페이지가 변경되었는데, 구지 데이터를 들고 있는 것도 그다지 합리적인 방법은 아닐 수 있다.
또, 거리가 먼 컴포넌트들끼리 통신한번 하자고 store를 도입하는 것도 우수운 일이다.
결론부터 얘기하자면, pub/sub 모델의 서비스를 만들고 교통정리 해주는 ngx-pub-sub 모듈 을 이용하는 것인데, Vue 의 eventBus 라는 개념과 같다.
이 모듈은 Ngrx 의 기능을 이용한 모듈인데, publish, subscribe 를 통해 이벤트를 매개해주는 중매자 이다.
React 는 이런 상황에서 무조건 redux나 mobx 를 사용한다. react 는 기본적으로 모든 통신이 데이터 변경이라고 생각해야 한다. 그래야 리액트 스럽게 생각하는 것이다.
Vue나 Angular 는 이벤트 버스나 Pub/Sub 모듈을 통해 이벤트를 매개한다.
Vue가 Angular 와 React 사이를 줄타기하면서 편한점을 잘 베끼는 것이라고 생각한다.
멀리 떨어져있는 컴포넌트라도, 이 NgxPubSubService 에 이벤트를 subscribe 하면 publish 하는 컴포넌트로 부터 이벤트를 들을 수 있다.
React 가 이런 방식을 좋아하지 않는 이유는 UI를 테스트 하기가 힘들기 때문이다. React 를 통해 나온 UI 디자인 개념의 툴이 storybook 인데, 이 storybook 의 개념이 바로 React 스러운 UI 스냅샷 개발이라고 생각하면 될 것 같다.
반면, Angular 는 DI 를 추구하는 플랫폼이다. UI 상태와 스냅샷이라는 react 스러운 개발과 완전히 다른 철학위에서 나온 개발 방법론이다. Vue는 뭐든, 편하고 쉬우면 된다는 주의이고...
개발을 하다 그냥 생각나서 적어본 것이다....
