[Angular] 템플릿과 템플릿 문법

2021. 4. 29. 18:11 JavaScript FrontEnd/Angular

 

템플릿과 템플릿 문법 (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