컴포넌트 뷰를 구성하는 템플릿은 templateURL로 작성해야 오기를 줄일 수 있다.
text interpolation 문자열바인딩
{{ expr }}기호로 템플릿에 텍스트를 표현하기위한 앵귤러 템플릿문법
앵귤러 템플릿문법이란 무엇인가?
템플릿코드에서 앵귤러가 특별히 파싱하는 문법이다.
{{ expr }}의 expr은 앵귤러문법들로 이루어진 표현식이다.
표현식에는 원시값,객체등 리터럴값을 사용할 수 있다.
{{ 'lee' }}, {{ 1 }}, {{ true }}, {{ {name:'lee'} }}
리터럴값은 텍스트로 암시적형변환되어 출력된다.
{name:'lee'}은 [object Object]로 출력된다.
리터럴값이외에 어떤것들을 사용할 수 있을까?
{{ name }} name은 리터럴값이 아니므로 리터럴값을 참조하는 변수다.
템플릿은 앵귤러 컴포넌트내의 일부분이고 컴포넌트 인스턴스가 관리하기때문에 컴포넌트는 클래스인스턴스이므로 클래스인스턴스는 자신의 내부에있는 뷰와 모델을 연결한다.
뷰/모델 연결방식은 앵귤러 템플릿문법내 식별자와 모델의 식별자를 공유하는 방식이다.
뷰/모델방식은 기본적으로 모델을 변경하면 DOM프로퍼티와 바인딩되어있는 것은 뷰도 따라서 갱신하므로 모델을 관리하면 된다.
모델은 사용자이벤트 또는 내부 구현으로 클래스코드로 변경된다.
<h1>Hello, {{ name }}</h1>
export class AppComponent {
name = 'lee';
}사용자 이벤트이든 내부구현이든 모델 name이 변화되면 앵귤러가 내부적으로 변화를 감지하여 뷰를 랜더링한다.
{{ expr }} 표현식에 사용가능한 것들이 무엇이 있을까?
expr은 표현식이므로 하나의 변수뿐만 아니라 여러개의 조합도 가능하다.
{{ 'hello'+name }} 리터럴과 변수의 조합
리터럴을 사용할 수 있다는것보다 클래스 인스턴스내 모델들을 사용할 수있다는 것에 흥미롭다.
클래스인스턴스에는 필드, 메소드가 있으므로 적절하게 필요한 것을 템플릿에 텍스트로 삽입할 수 있는 것이다.
text interpolation 표현식사용 가이드
- 짧게 작성
필드이름이나 메소드실행만 하는 정도가 좋다.
개발하기 쉽고 테스트하기도 쉽워진다. - 간단하게 실행되도록 작성
앵귤러는 변화감지동작(이벤트, 입력프로퍼티변화, 사용자실행)마다 표현식을 실행하기때문에 사용자가 불편함을 느끼지 않을 정도로 간단하게 작성해야 한다. - 사이드 이펙트 최소화
표현식에서 변경하려고하는 대상이외의 어떠한 것도 변경하지 않는것이 좋다.
컴포넌트 뷰에 바인딩된 클래스 프로퍼티를 읽는 동작이 다른 값을 변경하면 안된다.
화면은 랜더링이 완료된후 안정된 상태가 되어야 한다.
앵귤러 변화감지
앵귤러 프레임워크가 어플리케이션 UI상태와 데이터상태를 동기화하는 작동방식
어플리케이션 로직이 컴포넌트 데이터를 갱신하면 뷰에서 DOM프로퍼티와 바인딩된 값도 변경될 수 있고 변화감지는 현재 데이터모델에따라 뷰를 업데이트한다.
변화감지가 수행되면 change detector는 데이터모델의 상태를 다음 변화감지시 비교하기위해 이전상태값으로 보관한다.
앵귤러는 데이터바인딩이 있으면 뷰계층을 따라 내려가며 변화감지가 동작한다.
첫번째 단계에서는 현재 상태와 이전 상태를 비교해서 변화가 발생한 상태를 모두 취합하며,
두번째 단계에서는 새로운 데이터로 페이지 DOM을 갱신한다.
변화감지동작은 개발자가 명시적으로 실행(ChangeDetectorRef)하거나 @Input값이 변경되었을 때, 이벤트핸들러가 동작했을 때만 실행된다.
단방향데이터흐름
컴포넌트 트리에서 변화를 감지하기위해 부모에서 자식으로 향하는 데이터처리 흐름을 의미한다.
부모컴포넌트에서 자식컴포넌트로 전달되는 데이터가 있을때 변화감지는 부모컴포넌트를 먼저 검사하기 때문에 부모컴포넌트 데이터변경을 기본적인 변화감지정책으로 처리하면 된다.
하지만 변화감지가 부모컴포넌트를 처리하고 있는 동안에 자식컴포넌트에서 전되받는 데이터를 변경하면 앵귤러는 ExpressionChangedAfterItHasBeenCheckedError 에러를 발생시킨다. ( 이러한 경우는 매우 드물다... )
이 에러가 발생한다면 라이프사이클훅함수를 사용해서 데이터를 변경하면 된다.
``` ccc ``` 문자열바인딩은 태그내에 사용할 수 없다.
