[Angular] Directive란?

Angular를 사용하다 보면 컴포넌트 뿐만 아니라 디렉티브(Directive)라는 개념도 자주 등장하는데, 디렉티브는 HTML 요소에 새로운 동작을 추가하거나 동적으로 스타일을 변경하는 데 유용하게 사용됩니다.

디렉티브(Directive)란?

디렉티브(Directive)는 Angular가 HTML 요소의 동작을 확장하거나 조작할 수 있도록 하는 명령입니다. Angular 디렉티브는 크게 구조적 디렉티브(Structural Directive)와 속성 디렉티브(Attribute Directive)로 나눌 수 있습니다.

• 구조적 디렉티브: HTML의 구조에 영향을 주는 디렉티브로, * 표시가 붙습니다. 예를 들어, *ngIf는 조건에 따라 요소를 추가하거나 삭제하는 구조적 디렉티브입니다.
• 속성 디렉티브: HTML 요소의 속성이나 스타일을 동적으로 변경합니다. 예를 들어, [ngClass]나 [ngStyle]을 사용하면 동적으로 CSS 클래스를 적용할 수 있습니다.

---

디렉티브를 사용하는 이유

디렉티브 없이 HTML 요소에 스타일을 추가하려면 여러 컴포넌트에서 같은 코드를 반복해야 하지만, 디렉티브로 한 번만 정의해 두면 <p [appHighlight]="'yellow'">와 같은 간단한 형태로 코드 중복 없이 재사용할 수 있습니다.

---

사용자 정의 디렉티브 만들기

Angular에서는 사용자 정의 디렉티브를 만들어 HTML 요소에 새로운 동작을 추가할 수 있습니다.

 

색상을 변경하는 디렉티브 만들기

1. 디렉티브 생성

 

2. 디렉티브 코드 작성

import { Directive, ElementRef, HostListener, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  @Input('appHighlight') highlightColor: string = 'yellow';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.changeColor(this.highlightColor);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.changeColor('');
  }

  private changeColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

 

3. 디렉티브 사용

HTML에서 appHighlight 디렉티브를 사용할 수 있습니다. selector인 [appHighlight]에 색상을 지정하여, 마우스를 올리면 배경색이 바뀌게 됩니다.

<p [appHighlight]="'lightblue'">이 텍스트에 마우스를 올리면 배경색이 바뀝니다.</p>

 

디렉티브 동작 설명

• @Input(): [appHighlight]를 통해 색상을 외부에서 입력받습니다.
• HostListener: mouseenter와 mouseleave 이벤트에 반응하여 changeColor 메소드를 호출해 배경색을 변경합니다.
• Renderer2: setStyle을 통해 안전하게 DOM 요소의 스타일을 조작합니다.

---

정리

Angular의 디렉티브는 재사용 가능한 코드를 만들고, HTML 요소에 다양한 동작을 추가하는 데 유용합니다. 특히, 많은 요소에 동일한 동작을 반복적으로 적용하거나, HTML에 없는 특별한 기능을 추가할 때 큰 효과를 발휘합니다.