AngularJS, HTML Rendering

HTML Render

1. AngularJS가 DOM 트리를 먼저 구성합니다.
2. Directive, Component들 중에 Custom Tag를 Brower Engine이 이해할 수 있는 HTML Element로 변환합니다.
3. 이 때는 DOM을 조작할 수 있지만 아직 지시자와 컴포넌트 간에 연결이 되지 않은 상태이자 아직 Data가 반영되지 않은 상태이기 때문에 실제 View라고 볼 수 없습니다. 그저 DOM 덩어리들이라고 보면 됩니다.
4. 자신의 컴포넌트 혹은 지시자의 scope를 생성하고 Data와 Element를 링크하여 View를 만듭니다.
5. 자식 요소들까지 링크가 됩니다.

초기 DOM Parsing → Directive, Component 찾기

→ HTML 변환 → Controller Scope 초기화 → Data Binding → View 출력

1. Directives → HTML 변환 과정을 Compile
2. Data + HTML → View 변환 과정을 Link라 합니다

근데 이 과정에서

Directive이 Template HTML로 변환하는 과정 가운데

Template 안에 다시 Directive가 있는 경우는 어떻게 변환할까요?

다시 Directive를 해석하고 나머지 Element들은 다 버리는 것일까요이이 나머지 Element들은 Transclude라는 객체로 반환되어 넘겨지게 됩니다.

또한 스코프의 값은 새로운 Directive의 값에 의존받는 것이 아니라 원래 기존에 있던 부모의 Scope를 복사하여 넘겨 받습니다.

이러한 구조는 Element Tree와 Scope Tree 구조가 완벽하게 일치하지 못하게 만드는 원인입니다. Tranclude로 인한 새로운 요소들은 Element 구조로 봤을 때는 하위 노드여야 하지만 Scope구조는 수평구조를 이루기 때문입니다.

이러한 재밌는 렌더과정이 있는 AngularJS,, 어렵다 어려워

React Render와는 또 다른 재밌는 렌더링 방식입니다,,!

AngularJS의 Directive(지시자)(2) : Directive 해석의 두단계

AngularJS의 Directive(지시자)(2) : Directive 해석의 두단계

AngularJS의 Directive(지시자)(3) : transclude의 개념

AngularJS의 Directive(지시자)(3) : transclude의 개념