[Angular] Angular Directives

1) 디렉티브(지시자)란?

• DOM의 모양이나 동작을 지시하기 위한 명령
• HTML element나 element의 attribute 형태로 사용

2) 디렉티브를 사용하는 이유

• 컴포넌트를 통해서 DOM을 제어할 수 있지만 컴포넌트는 원칙적으로 view에만 관심 있음.
• 여러 view가 공통적으로 사용하는 속성을 directive로 정의하고 사용 시 SRP(단일책임원칙)에 맞고 컴포넌트의 복잡도를 낮추며 유지보수 측면에서 더 낫다.

단일 책임 원칙
모든 클래스는 하나의 책임만 가져야 한다

3) 컴포넌트 vs 디렉티브

• 컴포넌트 ∈ 디렉티브
• 컴포넌트는 view와 자식 컴포넌트를 가질 수 있음
• 디렉티브는 view와 자식 디렉티브를 가질 수 없음

4) 디렉티브의 종류

- Component Directive

• 컴포넌트를 말함
• selector에서 디렉티브를 지정해 사용

- Attribute Directive

• HTML element의 attribute로 사용

• ex. ngClass, ngStyle, ngModel

  • ngClass: CSS 클래스를 추가하거나 제어
  • ngStyle: HTML 스타일을 추가하거나 제거
  • ngModel: HTML 폼 엘리먼트에 양방향 데이터 바인딩 연결

  [ngClass]="" / [ngStyle]="" / [(ngModel)]="" 형식으로 사용

- Structural Directive

• DOM 구성을 제어하는 디렉티브
• ex. ngIf, ngFor, ngSwitch
  • ngIf 예시

<div *ngIf="hero" class="name"></div>

• hero가 null이나 undefined 가 아닐 때 DOM에 div를 추가함. (화면에 렌더링)
• 사실 이 코드는 아래 코드와 같음

<ng-template [ngIf]="hero">
    <div class="name"></div>
</ng-template>
 
혹은
 
<ng-container [ngIf]="hero">
    <div class="name"></div>
</ng-container>

• ngIf/ngFor/ngSwitch 중 두 개 이상 동시에 사용할 수 없음
• for문과 if문 동시에 사용 시 활용
• Structural Directive 두 개 이상 사용하기

<ng-container *ngFor="let c in cs">
    <ng-container *ngIf="hero">
        <div class="name"></div>
    </ng-container>
</ng-container>

- Custom Directive

• 빌트인 형태가 아닌 직접 만들어서 사용하는 디렉티브
  $ ng generate directive <디렉티브명>
• Angular CLI에 의해 파일 생성 → 디렉티브명.directive.ts 파일에서 코드 수정
• 생성 후 root 모듈에 등록 필요 → Angular CLI가 자동으로 등록

---

참고 자료: https://js2prince.tistory.com/entry/Angular-Directive
https://angular.kr/guide/built-in-directives