@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
는 한 번만 읽는 정적 메타데이터 처리에 최적화되어 있음- 예시:
와 같은 정적 속성값이 필요한 디렉티브 구현 시 유용