Angular @Attribute 디렉티브 활용 및 특징
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

@Attribute 디렉티브의 활용과 특징

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • Angular 개발자 (디렉티브/컴포넌트 개발에 관심 있는 중급 이상 개발자)
  • 난이도: 중급 (Angular 기초 지식, 디렉티브 사용 경험 필수)

핵심 요약

  • @Attribute생성 시점에 HTML 속성값을 한 번만 읽는 파라미터 디렉티브로, @Input()과 동작이 달라짐
  • 비반응형 (값 변경 시 업데이트 없음)이며, 정적 메타데이터 추출에 적합
  • 예시: @Attribute("font")로 HTML의 font 속성값을 컴포넌트 생성 시점에 직접 접근 가능
  • @Input()동적 값을 처리할 때, @Attribute정적 값을 처리할 때 사용

섹션별 세부 요약

1. @Attribute의 정의 및 사용 목적

  • @Attribute는 디렉티브 생성자에서 호스트 요소의 HTML 속성값을 정적 문자열로 주입
  • 사용 시점: 컴포넌트 초기화(ngOnInit) 전, 생성자(constructor) 내부
  • 장점: 정적 메타데이터 추출, @Input()보다 간단한 처리 가능

2. @Attribute vs @Input 비교

| 특징 | @Input() | @Attribute() |

|--------------|-------------------|------------------------|

| 값 읽는 시점 | ngOnInit 후 | 생성자 실행 시 |

| 반응형 여부 | ✅ 예 (값 변경 시 업데이트) | ❌ 아니오 (한 번만 읽음) |

| 원본 출처 | Angular 바인딩 | 정적 HTML 속성 |

| 적용 시점 | 동적 값 처리 시 | 정적 메타데이터 처리 시 |

3. @Attribute 사용 예제

@Directive({ selector: "[fontType]" })
export class FontType implements OnInit {
  constructor(
    @Attribute("font") public font: "underline" | "italic" | "bold" | null
  ) {
    console.log("Constructor Font Value:", font);
  }
  ngOnInit() {
    switch (this.font) {
      case "italic": this.render.setStyle(...); break;
      // ...
    }
  }
}
  • HTML에서 와 같이 사용 시, font 속성값을 생성자에서 직접 접근 가능
  • 결과: bold일 경우 텍스트 색상이 녹색으로 변경

4. Angular 컴파일러 처리 방식

  • @Attribute디렉티브 인스턴스화 시점에 값 주입
  • 컴파일러가 생성한 코드에서 ɵɵinjectAttribute("font")로 값 주입 확인 가능

5. @Attribute의 한계 및 주의사항

  • 값 변경 불가능: ngAfterViewInit에서 font 속성값 변경 시, 기존 값 유지

```ts

ngAfterViewInit() {

this.render.setAttribute(..., 'some_random_value');

console.log('font', this.font); // 변경 전 값 유지

}

```

  • 동적 바인딩([attr.font])은 @Input() 사용 권장

결론

  • 정적 HTML 속성값이 필요할 때 @Attribute를 사용하고, 동적 값 변경이 필요한 경우 @Input()을 선택
  • @Attribute한 번만 읽는 정적 메타데이터 처리에 최적화되어 있음
  • 예시: 와 같은 정적 속성값이 필요한 디렉티브 구현 시 유용