들어가기 전 ....
이제 앵귤러는 서비스와 옵저버블 까지 작성하면 정리한 부분이 마무리 될거 같다. 사실 기초적인 문법 정도만 숙지하고 바로 소스 코드를 보러 갔기 때문에 실제 코드를 보는 과정에서는 더 어려움이 있엇다... 특히 구조를 파악하는 과정에서 문제점이 많았는데 이는 나중에 또 이야기 해보겠다.
디렉티브(Directive)
디렉티브는 Angular 애플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스를 의미합니다. Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공 합니다.
- Angular 공식 Docs -
위의 말을 다시 한 번 정리해보면
- 템플릿이 렌더링될 때 DOM의 구조를 디렉티브의 로직에 따라 변형 시킬 수 있다.
종류
- 컴포넌트(Components)
템플릿이 존재하는 디렉티브, 디렉티브 중에서는 컴포넌트 타입이 가장 많이 사용된다.
- 속성 디렉티브(Attribute directives)
엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 디렉티브.
- 구조 디렉티브(Structural directives)
조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 디렉티브.
위에서 볼 수 있듯이 컴포넌트 또한 하나의 디렉티브 임을 알 수 있다.
속성 디렉티브(Attribute directives)
속성 디렉티브는 HTML 요소, 속성, 프로퍼티, 컴포넌트의 동작을 다룰 수 있게 된다.
자주 사용하는 속성 디렉티브
- NgClass
CSS 클래스를 다룰 수 있게 된다.
- NgStyle
HTML 스타일을 변경 가능하다.
- NgModel
HTML 폼 요소에 양방향 데이터 바인딩을 연결. 즉, 한 쪽에서 데이터를 수정하면 다른 쪽에도 반영 된다.
NgClass
여러 개의 클래스를 추가/제거 하는데 사용할 수 있다.
단, 한 개의 클래스를 추가/제거 하기 위해선 NgClass 보다는 클래스 바인딩을 사용하는 것이 더 좋다고 공식 문서에서 언급 되었다.
// 표현식으로 바인딩 isSpecial의 값에 따라 결정 된다.
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
// 메소드로 바인딩
currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
// CSS 클래스는 컴포넌트 프로퍼티 값에 따라 추가되거나 제거된다.
this.currentClasses = {
saveable: this.canSave,
modified: !this.isUnchanged,
special: this.isSpecial
};
}
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>
NgStyle
컴포넌트 상태에 따라 달라지는 여러 인라인 스타일을 동시에 지정 가능.
currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
// CSS 스타일은 컴포넌트 프로퍼티 값에 따라 지정됩니다.
this.currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
};
}
<div [ngStyle]="currentStyles">
This div is initially italic, normal weight, and extra large (24px).
</div>
NgModel
데이터 프로퍼티의 값을 화면에 표시할 수 있으며, 사용자가 이 값을 변경했을 때 클래스 프로퍼티에 반영.
[()] 바인딩과 [] ()로 나눠서 바인딩하는 방법이 존재한다.
[()] 바인딩은 단순히 프로퍼티를 바인딩하는 방법이라 프로퍼티를 각 이벤트에 커스터마이징 하기 어렵다.
그에 비해 []와 ()를 나눠서 사용하면 []에는 프로퍼티를 바인딩하고 ()에는 이벤트를 바인딩하여 원하는 이벤트에 맞게 프로퍼티를 바인딩할 수 있게 된다.
/* ... */ // form module import
<label for="example-ngModel">[(ngModel)]:</label>
// [()] 바인딩
<input [(ngModel)]="currentItem.name" id="example-ngModel">
// []와 ()로 나눠서 바인딩
<input [ngModel]="currentItem.name"
(ngModelChange)="setUppercaseName($event)"
id="example-uppercase">
구조 디렉티브(Structure directives)
HTML의 구조를 직접 조작할 수 있다. 구조 디렉티브는 조건에 맞는 엘리먼트를 DOM 트리에 추가하거나, 제거, 조작하는 방식으로 DOM 구조를 변형한다.
자주 사용하는 구조 디렉티브
-
ngIf
조건문이 참일 경우 특정 요소를 DOM에 추가/제거 할 수 있다. -
ngFor
배열에 있는 항목을 반복한다.
ngIf
설명이 딱히 필요 없이 직관적이다 위에서 언급한 것과 같이 조건이 참일 경우 DOM에 추가하고 거짓이면 DOM에서 제거한다.
<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>ngFor
java의 for each 구문이나, python의 for 구문 처럼 주어진 iterable한 프로퍼티를 순회하며 반복한다.
// items = [{name: '1'}, {name: '2'}, {name: '3'}]
<div *ngFor="let item of items">{{item.name}}</div>
// 동치
<div> '1' </div>
<div> '2' </div>
<div> '3' </div>
// 인덱스를 받아서 사용할 수 도 있다.
<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>