디렉티브에서 시그널 사용하기

서비스에서 시그널을 사용하는 방법을 배웠으니, 이제 디렉티브에서 시그널을 사용하는 방법을 살펴봅시다. 시그널은 디렉티브에서도 컴포넌트와 똑같이 동작합니다! 주요 차이점은 디렉티브에는 템플릿이 없다는 것입니다. 따라서 주로 호스트 바인딩에서 시그널을 사용해서 호스트 엘리먼트를 반응형으로 갱신합니다.

이번 실습에서는 강조 표시 디렉티브를 만들면서 시그널로 디렉티브의 반응형 동작을 구현하는 방법을 배웁니다.

컴포넌트와 같은 방식으로 시그널 구성하기

시그널 함수를 불러오고 반응형 상태를 만듭니다. 컴포넌트에서와 똑같이 동작합니다:

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

@Directive({
  selector: '[highlight]',
})
export class HighlightDirective {
  // Signal inputs - same as components!
  color = input<string>('yellow');
  intensity = input<number>(0.3);

  // Internal state - same as components!
  private isHovered = signal(false);

  // Computed signals - same as components!
  backgroundStyle = computed(() => {
    const baseColor = this.color();
    const alpha = this.isHovered() ? this.intensity() : this.intensity() * 0.5;

    const colorMap: Record<string, string> = {
      'yellow': `rgba(255, 255, 0, ${alpha})`,
      'blue': `rgba(0, 100, 255, ${alpha})`,
      'green': `rgba(0, 200, 0, ${alpha})`,
      'red': `rgba(255, 0, 0, ${alpha})`,
    };

    return colorMap[baseColor] || colorMap['yellow'];
  });
}

컴포넌트 패턴과 동일합니다. @Component 대신 @Directive를 사용한다는 점만 다릅니다.

호스트 바인딩에서 시그널 사용하기

디렉티브에는 템플릿이 없으므로 호스트 바인딩에서 시그널을 사용해서 호스트 엘리먼트를 반응형으로 갱신합니다. host 설정과 이벤트 핸들러를 추가합니다:
```
@Directive({
  selector: '[highlight]',
  host: {
    '[style.backgroundColor]': 'backgroundStyle()',
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()',
  },
})
export class HighlightDirective {
  // ... signals from previous step ...

  onMouseEnter() {
    this.isHovered.set(true);
  }

  onMouseLeave() {
    this.isHovered.set(false);
  }
}
```
시그널이 변경되면 컴포넌트의 템플릿 바인딩처럼 호스트 바인딩도 자동으로 다시 평가됩니다. isHovered가 변경되면 backgroundStyle computed() 시그널이 다시 계산되고, 호스트 바인딩이 엘리먼트 스타일을 갱신합니다.

템플릿에서 디렉티브 사용하기

앱 템플릿을 수정해서 반응형 디렉티브의 동작을 확인합니다:

template: `
<div>
  <h1>Directive with Signals</h1>

  <div highlight color="yellow" [intensity]="0.2">Hover me - Yellow highlight</div>

  <div highlight color="blue" [intensity]="0.4">Hover me - Blue highlight</div>

  <div highlight color="green" [intensity]="0.6">Hover me - Green highlight</div>
</div>
`,

디렉티브는 입력 시그널을 기반으로 강조 표시를 자동으로 갱신합니다!

디렉티브에서 시그널이 동작하는 방식을 배웠습니다. 핵심 내용은 다음과 같습니다:

동일한 시그널 API - input(), signal(), computed(), effect() 등 모든 시그널 API는 디렉티브와 컴포넌트에서 똑같이 동작합니다.
주로 호스트 바인딩에 사용 - 디렉티브에는 템플릿이 없으므로 호스트 바인딩의 시그널로 호스트 엘리먼트를 반응형으로 수정합니다.
동일한 반응형 패턴 - 시그널이 갱신되면 컴포넌트 템플릿에서처럼 computed() 시그널과 호스트 바인딩이 자동으로 다시 평가됩니다.

다음 단계에서는 시그널 쿼리로 자식 엘리먼트를 조회하는 방법을 배웁니다!

컴포넌트와 같은 방식으로 시그널 구성하기

호스트 바인딩에서 시그널 사용하기

템플릿에서 디렉티브 사용하기