Angular 디렉티브

같은 동작을 여러 요소에 반복해서 적용해야 할 때가 있어요. 예컨대 호버하면 배경색이 바뀌는 요소가 열 개라면, 그 로직을 열 번 복붙하는 대신 한 곳에 모아두고 원하는 요소에만 붙여 쓰고 싶죠. 디렉티브(Directive)가 바로 그런 재사용 가능한 동작을 요소나 컴포넌트에 더해 주는 도구예요.

출처: 공식 문서 — Angular 디렉티브 (Directives)

언제 디렉티브를 쓸까요

디렉티브는 재사용 가능한 동작을 이미 존재하는 요소나 컴포넌트에 적용하고 싶을 때 가장 효과적이에요. 흔한 예시로는 이런 것들이 있어요.

오토포커스나 툴팁처럼 여러 요소에 같은 모양·동작을 적용하기
호스트 요소의 DOM, 속성, 클래스를 읽거나 쓰기
내가 소유하지 않은 컴포넌트의 소스를 바꾸지 않고 동작을 추가하기

반면에 자신만의 마크업을 렌더링하거나 자체 템플릿을 가진 UI 조각을 관리해야 한다면, 템플릿을 가진 특수한 디렉티브인 컴포넌트를 쓰는 게 맞아요.

간단한 예시로 감 잡기

마우스를 올리면 배경색이 노란색으로 변하는 동작을 생각해 볼게요. 모든 요소에 이벤트 처리 로직을 반복하는 대신, 그 동작을 디렉티브 하나로 묶어 필요한 곳마다 적용할 수 있어요.

다음 appHighlight 디렉티브는 마우스가 들어오면 호스트 요소의 배경색을 정하고, 떠나면 지워줘요.

import { Directive, signal } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'isHovered.set(true)',
    '(mouseleave)': 'isHovered.set(false)',
    '[style.background-color]': 'isHovered() ? "yellow" : null',
  },
})
export class HighlightDirective {
  protected isHovered = signal(false);
}

host 메타데이터가 마우스 이벤트를 받아 isHovered 시그널 값을 바꾸고, 호스트 요소의 background-color 스타일을 그 시그널 값에 바인딩해요.

이 디렉티브는 셀렉터를 요소의 속성으로 추가하는 방식으로 적용해요.

<p appHighlight>Highlight me!</p>

appHighlight 속성을 가진 모든 요소가 같은 호버 동작을 얻게 되고, 로직은 한 곳에만 정의돼 있어요.

디렉티브의 종류

Angular에는 세 가지 주요 디렉티브 유형이 있어요.

컴포넌트(Components) — 자체 템플릿을 가진 디렉티브로, UI 조각을 만들 때 써요
구조 디렉티브(Structural directives) — DOM에 요소를 추가·제거하거나 요소 구성을 바꿔요 (*ngIf, *ngFor 같은 것들이 여기 속해요)
속성 디렉티브(Attribute directives) — 기존 요소가 아니라 요소의 모양이나 동작을 바꿔요

각 유형을 자세히 다루는 가이드는 다음 단계에서 이어서 볼 수 있어요.

Angular 디렉티브