Vanilla 코딩 더 필요한 부분

app이 복잡해지는 경우 이제 슬슬 필요해지는 것들 정리

1. Component 재활용.

   • 콤포넌트는 props를 받아 결과물을 그려줄 뿐만 아니라 동작도 이에 맞게 한다.
   • 리액트에선 어떻게 하나?
     - 콤포넌트를 정의해놓으면, 여러 장소에서 그대로 가져다 쓸 수 있다.
     • 이런 것도 가능하다. render 할 때 해당 콤포넌트를 tag로 넣어두면 콤포넌트가 삽입된다.
       • 바닐라로 이 부분이 가장 어려웠다. view는 어찌저찌 replacement를 하겠다.
         • 동작은 어떻게 심나?
           - 우선 함수가 호출이 바로 된다.
         • 이벤트 위임이 바로 안되는것도 한몫하는것같다. parent에서 해주는게 무조건 이득인데, child에서 정의를 하면 이걸 그대로 eventListener를 다는게 아니라, parent에 위임해서 하나로 달도록 변환을 하는게 필요한 것 같기도 하다.

2. M-V 분리

   • storage 업데이트를 하고 re-render시키기. 이게 답인가? 편하긴 하다. 대신에 하위 컴포넌트가 맞물린 경우 또 너무 헷갈렸다. re-render만 하면 되나?

3. 바인딩
   - 값 변경후 계속 re-render. 이게 맞나? 값이 변경되면, 당연히 DOM이 바뀌는 건 맞다. 대신 특정 DOM만 바뀌면 된다. 이 경우에도 나는 전체 DOM을 다시 그린다. 3번째 element가 다른 컴포넌트로 스왑되어야 한다면, 즉 ng-if이면 3번째 element만 다시 그려질 것이다. 이렇게 하려면.. 3번째 element를 떼내어서 다른 컴포넌트로 replace시킨다.
   그니깐 이건 rendering 효율 문제보다도, 내가 rendering을 직접 실행시켜야 되는 것이 고역이었다. 즉 해당 값이 변하면 자동으로 이에 영향받는 것들이 rendering이 되어야 한다.
   영향받는 건 어떻게 아나..
   모델 user3이 바뀌면 헤더도 바뀌고 elem3도 바뀌어야 한다고 했을 떄,
   헤더와 elem3에게 user3이 바뀐다는 사실을 알려주고, 헤더와 elem3이 업데이트를 친다.

   react의 경우는 virtual DOM이 있어서, 이런 귀찮은 짓을 안하고 아마 root를 새로 전부 업데이트 칠 것이다.
   그럼 elem3만 바뀌었음을 감지하니, 이 부분만 replace되는 거겠지.

   angular라면, 이런 virtual DOM은 없다. 이 경우 어떻게 하나?
   elem3과 DOM과의 연관관계를 미리 정리해둔다.
   예를 들면. user3은 headerEl의 .display에 xxx를 업데이트해야하고, 또 elem3El의 .dd에 yyy를 업데이트 해야한다.
   라는 걸 미리 들고있는다.
   user3: updateDoms(user3)

   이런게 미리 구성되어 있는거다.
   실은 이런건 아니고 다 업데이트해보는데, dirty체크로 user3인걸 알아내는거다.
   따라서 user3만 변경되어도 dom 업데이트가 잘 된다.

   일단 change detection에 대해 이해가 되었다.

   그럼..

   감지는 일단 전체를 통해 하는걸 짰다 치자. triggering은?
   store에 접근할때마다 하면 되지 않을까? setState개념이다.

   성능을 위해서라면 virtualDom이나 angular dirty 방식 등으로 필요한 것만 그리면 되고,
   아니면 그냥 생으로 다그려.
   triggering만 잘해두면 편하다.

   store에 접근할때만 trigger링 시키거나 (react 스타일)
   eventListener를 엿들어서 특정 작업을 하려고 할 때만 trigger시키면된다.

   전자가 더 쉬워보임.

4. 상태 관리
   • hierarchycal한 구조일 떄 그냥 flat tree가 원래 나은가?
   • Angular라 생각해보자.
     - t_list의 list는 어쩔수없구나
     • t_list = T의 T list에서 선택을 하면 child에 t_list만 넘겨준다.
     • child는 아무것도 모르고 $scope.t_list만 바인딩해서, t_list를 조작한다.
     • 대신 Tid를 갖고 있다. 따라서 t_list의 업데이트를 Tid에 해주면 된다.