템플릿과 템플릿 문법 (Template)
템플릿 (Template) 란?
- 템플릿은 HTML과 Angular 고유의 템플릿 문법을 사용하여 UI의 초사 단위인 컴포넌트의 뷰를 정의
- 동적으로 변하는 데이터는 컴포넌트 클래스가 관리하며 템플릿 문법의 데이터 바인딩에 의해 정적 HTML에 포함
- 뷰 생성과정
- Component class에서 데이터 바인딩을 통해 데이터와 템플릿이 합쳐져 compile을 통해 최종적인 view를 생성
- Angular는 템플릿과 컴포넌트 클래스로 뷰와 모델(데이터와 비즈니스 로직)을 분리한다.
- Angular는 컴포넌트 기반 개발 (CBD, Component Based Development) 프레임워크
- MVC와 MVVM패턴과 일치하지 않지만 템플릿은 뷰(View)를 나타내고 컴포넌트 클래스는 Controller와 ViewModel의 일부를 담당
- 역할 종류
- 모델 (Model)
- 애플리케이션에서 사용되는 데이터 형식을 말한다. 비즈니스 로직, 유효성 검사 및 그외 다양한 기능 포함
- 뷰 (View)
- 사용자에게 모델(데이터)을 표시하는 것, 뷰는 같은 모델을 다양한 방식으로 표현할 수 있다.
- 컨트롤러 (Controller)
- 모델과 뷰의 상호 작용을 감시하고 업데이트
- 뷰모델 (ViewModel)
- 뷰가 데이터 바인딩을 통해 컨트롤러의 역할
- DOM의 상태 변경 전달 순서
- DOM은 상태(input요소에 값을 입력한 상태, checkbox 요소를 체크한 상태)를 갖고 있으며, 뷰와 모델은 분리되어 있지만 상태는 공유되어야 한다.
- DOM의 상태가 변경되면 템플릿은 변화를 감지하고 변화된 상태를 컴포넌트 클래스에 전달
- 컴포넌트 클래스는 비즈니스 로직을 실행하고 템플릿에 실행 결과를 공유
- 템플릿은 이를 전달받아 DOM 업데이트
- 템플릿은 선언형 프로그래밍 (Declarative programming) 방식으로 뷰와 모델의 관계를 관리.
- Angular는 변화 감지(Change detection)메커니즘 위에서 동작하는 데이터 바인딩(Data binding)을 통해 템플릿과 컴포넌트 클래스를 긴밀하게 연결하고 동기화
- 템플릿과 컴포넌트 클래스는 데이터 바인딩 (인터폴레이션, 프로퍼티 바인딩, 이벤트 바인딩, 양방향 바인딩으로 연결) (예: {{expression}})
- 변화감지 (change detection)은 zone.js에서 업데이트 변화 감시를 한다.
템플릿 문법 (Template Syntax)
- 템플릿과 컴포넌트 클래스 간 데이터 공유를 위한 데이터 바인딩과 동적으로 DOM 구조, 스타일 등을 변경할 수 있는 빌트인 디렉티브 등 지원
- 정적인 뷰는 HTML만으로 정의할 수 있지만 컴포넌트와 연계하여 동적으로 변화하는 뷰를 정의하기 위해서 템플릿 문법을 사용
- 데이터 바인딩
- 인터폴레이션
- 프로퍼티 바인딩
- 어트리뷰트 바인딩
- 클래스 바인딩
- 스타일 바인딩
- 이벤트 바인딩
- 양방향 데이터 바인딩
- 빌트인 디렉티브
- 빌트인 어트리뷰트 디렉티브
- ngClass
- ngStyle
- 빌트인 구조 디렉티브
- ngIf
- ngFor
- ngSwitch
- 템플릿 참조 변수
- 템플릿 표현식 연산자
- [참고]
출처 : ourcstory.tistory.com/442?category=630698