앵귤러는 프론트엔드 프레임워크로서 컴포넌트가 핵심이기때문에 컴포넌트의 구조와 작동원리를 제대로 이해해야 한다.
컴포넌트는 View를 담당하는 템플릿, Controller를 담당하는 클래스로 구성된다.
컴포넌트는 마치 하나의 컨테이너 요소노드처럼 작동한다.
<body>
<app-root></app-root>
</body>index.html에는 app-root라는 하나의 컴포넌트가 있다.
이 컴포넌트는 웹페이지가 로드될때 인스턴스화되고 내부에 다수의 하위 컴포넌트를 가지고 이 컴포넌트들도 인스턴스가 만들어지고 템플릿과 상호작용을 하게 된다.
템플릿과 클래스의 상호작용
웹페이지가 로드되면 컴포넌트의 클래스 필드가 초기화되고 메소드가 정의되면서 인스턴스가 생성된다.
생성된 인스턴스의 프로퍼티들은 템플릿내 요소노드의 속성값, 이벤트와 연동되어 템플릿을 제어함으로써 반응형 웹을 가능하게 한다.
<p *ngIf="product">
Description: {{ product.description }}
</p>product는 인스턴스의 프로퍼티로 프로퍼티의 값에따라 템플릿 요소노드가 DOM에 추가되거나 제거되도록 한다.
View의 사용자반응에따라 Model이 변경되고 Model이 변경되면 View가 갱신되어 반응형웹이 되는 것이다.
컴포넌트는 트리구조이기 때문에 상위컴포넌트와 하위컴포넌트의 통신이 가능하다.
웹페이지의 파싱순서는 위에서 아래방향으로 이루어지기 때문에 상위컴포넌트가 인스턴스화된후 하위컴포넌트가 인스턴스화되어 상위클래스의 프로퍼티값을 하위컴포넌트의 프로퍼티로 전달할 수 있다.
반대로 하위컴포넌트에서 상위컴포넌트로는 이벤트방식이 데이터를 전달할 수 있다.
상위컴포넌트에서 하위컴포넌트로 데이터를 전달하는 방법
<app-product-alerts [sub_product]="super_product" >
</app-product-alerts>[sub_product]="super_product"에서 super_product는 상위컴포넌트의 프로퍼티이며 sub_product는 하위컴포넌트(app-product-alerts)의 프로퍼티다.
[]대괄호는 데이터바인딩 기호다.
하위컴포넌트의 sub_product프로퍼티에 값이 전달된다.
text interpolation 문자열바인딩과 데이터바인딩 2가지 방법으로 가능하다.
하위컴포넌트에서 상위컴포넌트로 데이터를 전달하는 방법
하위컴포넌트가 상위컴포넌트보다 늦게 인스턴스화 되기때문에 위와같은 방법은 사용할 수 없다.
하위컴포넌트에서 이벤트를 발생시키고 상위컴포넌트에 이벤트를 감지하여 값을 전달 받는다.
<app-product-alerts (notify)="onNotify(arg)">
</app-product-alerts>하위컴포넌트에서 notify이벤트가 발생하면 상위컴포넌트의 onNotify함수가 실행되며 매개변수가 전달된다.
()소괄호는 이벤트바인딩 기호다.
