템플릿
템플릿은 사용자 인터페이스를 구성
즉, HTML
문자열 바인딩()
표현식 안에 문자열을 넣는 것을 의미한다. 기본적으로 문자열 바딩은 이중 중괄호({{}}) 를 구분자로 사용한다.
currentCustomer = 'Maria';
Current customer: {{ currentCustomer }}
{{title}}
템플릿 실행문(Template statements)
템플릿 실행문은 HTML 템플릿 안에서 메서드를 실행하거나 프로퍼티를 조작하는 로직을 의미
템플릿 실행문을 활용하면 사용자의 이벤트에 맞춰서 컨텐츠를 동적으로 변경하거나 폼을 제출
아래 예제에서 deleteHero()라고 작성된 것처럼, 템플릿 실행문은 (이벤트)="실행문"이라는 형식으로 사용합니다.
src/app/app.component.html
content_copy
<button type="button" (click)="deleteHero()">Delete hero
이제 사용자가 Delete hero 버튼을 클릭하면 Angular가 컴포넌트 클래스에 있는 deleteHero() 메서드를 실행합니다.
템플릿 실행문은 엘리먼트, 컴포넌트, 디렉티브에 모두 사용할 수 있습니다.
이벤트에 반응하는 패턴은 Angular가 주장하는 단방향 데이터 흐름에도 맞습니다. 한 번의 이벤트 싸이클 안에서는 애플리케이션에 있는 어떠한 것이라도 자유롭게 수정할 수 있습니다.
Angular의 템플릿 실행문 파서는 템플릿 표현식과는 다른 문법 및 파싱 규칙을 사용한다는 것을 나타냅니다. 이것은 Angular 템플릿에서 사용되는 여러 종류의 구문과 표현식이 있기 때문에 발생하는 현상입니다.
템플릿 표현식 (Template Expressions):
템플릿에서는 중괄호({{}}) 안에 JavaScript 표현식을 사용하여 데이터 바인딩을 수행합니다.
예를 들어, {{ user.name }}와 같은 표현식은 user 객체의 name 속성을 가져와 해당 위치에 표시합니다.
html
Copy code
Hello, {{ user.name }}!
템플릿 실행문 (Template Statements):템플릿에서는 이벤트 처리기나 조건문, 반복문과 같은 논리적인 흐름을 정의할 때 중괄호 안에 * 기호를 사용합니다.
예를 들어, ngIf, ngFor와 같은 구조 디렉티브가 템플릿 실행문에 해당합니다.
html
Copy code
Welcome, {{ user.name }}!
따라서 주어진 문장은 Angular의 템플릿 시스템이 템플릿 표현식과 템플릿 실행문을 파싱하는 데 각각 다른 구문 해석기를 사용한다는 의미입니다.
어트리뷰트 디렉티브
NgClass
CSS 클래스를 추가하거나 제거한다.
[ngClass]는 Angular에서 제공하는 디렉티브 중 하나로, 동적 HTML요소에 클래스를 추가 또는 제거할때 사용된다. [ngClass]를 사용하면 컴포넌트 클래스에서 정의한 조건에 따라 동적으로 클래스를 변경할 수 있다.
어트리뷰트(Attribute) VS 프로퍼티(Property)
HTML 요소의 특성을 나타내는 두 가지 다른 개념이다.
❗️Angular에서는 이 둘 간의 차이를 이해하는 것이 중요하다.
어트리뷰트(Attribute)
파이프
파이프를 사용하면 문자열, 통화금액, 날짜 등의 데이터를 원하는 형태로 표시할 수 있다.
파이프는 템플릿 표현식에 사용하는 간단한 함수이다. 입력값을 받아서 이 값을 변환해서 반환한다. 파이프는 한 번만 선언해주면 애플리케이션 전역에 자유롭게 사용할 수 있기 때문에 활용하기 좋다.
템플릿 각종 바인딩 학습하였고
디렉티브에서는 기본디렉티브 NgClass와 구조디렉티브 *NgIf,*NgFor에 대해서 학습하였습니다.
