[Angular] Directive란? (feat. Built-in Directive)

안녕하세요 Foma 입니다!

 

오늘은 HTML 엘리먼트에 다양한 동작을 추가하는 Directive에 대해서 알아보도록 하겠습니다.

 

바로 시작할게요~

---

Directive란?

 

먼저 사전적 의미를 보면 아래와 같이 '지시' 라는 뜻을 가지고 있습니다.

 

 

Angular 공식 문서엔 Directive를 아래와 같이 소개합니다.

 

 

즉, 간단히 말하면 Directive는 엘리먼트가 어떠한 동작을 할 수 있도록 '지시' 하는 클래스 입니다.

---

Directive 종류

 

Directive는 3가지 종류가 있습니다.

 

1. Components

 

컴포넌트는 템플릿이 존재하는 Directive로 가장 많이 사용되는 Directive 입니다.

 

(컴포넌트는 나중에 따로 글을 정리 하도록 하겠습니다.)

 

2. Attrubute Directives

 

어트리뷰트 디렉티브는 엘리먼트, 컴포넌트의 모습이나 동작을 변경하는 Directive 입니다.

 

3. Structural Directives

 

조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 Directive 입니다.

---

Built-in Directive

 

앵귤러 자체에서 만들어진 Built-in Directive에 대해 알아보도록 하겠습니다.

 

1. NgClass

 

클래스 여러개를 엘리먼트에 동시에 추가하거나 제거할 수 있습니다.

 

css

 

div {
    color: black;
    font-size: 14px;
}

div.error {
    color: red;
}

div.important {
    font-size: 20px;
}

div.invalid {
    text-decoration: line-through;
}

 

html

 

아래와 같이 [ngClass]로 바인딩 합니다.

 

<div *ngFor="let letterClass of letterClasses">
  <div [ngClass]="letterClass">안녕하세요</div>
</div>

 

component

 

클래스의 값을 정해 줍니다.

 

export class AppComponent implements OnInit {
  letterClasses: any[] = [
    { error: true, important: false, invalid: true },
    { error: false, important: false, invalid: true },
    { error: true, important: false, invalid: false },
    { error: true, important: true, invalid: true },
    { error: false, important: true, invalid: true },
    { error: false, important: false, invalid: false },
  ];

  ngOnInit(): void {}
}

 

아래와 같이 letterClass의 값에 맞게 css의 클래스가 적용되어 나오는 것을 볼 수 있습니다.

 

 

2. NgStyle

 

컴포넌트 상태에 따라 달라지는 여러 인라인 스타일을 동시에 지정할 수 있습니다.

 

component

 

style들을 원하는 값에 맞게 작성해 줍니다.

 

export class AppComponent implements OnInit {
  letterStyles: any[] = [
    { color: 'red', backgroundColor: 'black', fontSize: '14px' },
    { color: 'orange', backgroundColor: 'gray', fontSize: '16px' },
    { color: 'yellow', backgroundColor: 'purple', fontSize: '18px' },
    { color: 'green', backgroundColor: 'pink', fontSize: '11px' },
    { color: 'blue', backgroundColor: 'teal', fontSize: '20px' },
    { color: 'indigo', backgroundColor: 'white', fontSize: '19px' },
  ];

  ngOnInit(): void {}
}

 

html

 

component의 letterStyle을 [ngStyle]로 바인딩 해줍니다.

 

<div *ngFor="let letterStyle of letterStyles">
  <div [ngStyle]="letterStyle">안녕하세요</div>
</div>

 

아래와 같이 style이 적용되어 나오는 것을 볼 수 있습니다.

 

 

3. NgIf

 

if문과 동일하게 조건을 걸어 엘리먼트를 추가하거나 제거할 수 있습니다.

 

component

 

버튼을 누르면 타이틀이 바뀌도록 코드를 작성합니다.

 

export class AppComponent implements OnInit {
  buttonTitle: string = 'Remove';

  ngOnInit(): void {}

  click() {
    this.buttonTitle = this.buttonTitle == 'Remove' ? 'Add' : 'Remove';
  }
}

 

html

 

ngIf를 통해서 buttonTitle에 따라서 제거되거나 추가되도록 합니다.

 

<h1 *ngIf="buttonTitle == 'Remove'">Hi</h1>
<button [ngStyle]="{ width: '100px', height: '100px' }" (click)="click()">
  {{ buttonTitle }}
</button>

 

Remove일 때 버튼을 누르면 Hi가 사라지고,

 

Add일 때 버튼을 누르면 Hi가 다시 생기는 것을 볼 수 있습니다.

 

 

4. NgFor

 

배열에 있는 항목을 화면에 표시할 수 있습니다.

 

component

 

component에 숫자가 들어 있는 배열을 만들어 줍니다.

 

export class AppComponent implements OnInit {
  numbers: number[] = [1, 2, 3, 4, 5];
  ngOnInit(): void {}
}

 

html

 

ngFor을 사용하여 배열을 차례로 나타나게 해줍니다.

 

<div *ngFor="let number of numbers">
  <h1>{{ number }}</h1>
</div>

 

아래와 같이 숫자가 차례로 나타나는 것을 볼 수 있습니다.