[Angular] Directive

Directive란?

---

사전에서 Directive를 검색해보면, '지시'라는 의미를 가진 단어로 나타난다. Angular에서 Directive는 DOM을 관리하기 위해, Directive를 사용한 요소들에게 어떠한 '지시'를 한다.

 

 

 

 

 

 

Directive 종류

---

컴포넌트 디렉티브(Component Directive)

컴포넌트 역시 디렉티브의 한 종류로 볼 수 있다. 하지만 컴포넌트는 @Component() 데코레이터를 사용해서 별도로 사용한다고 한다. (참고 사이트에 자세한 설명이 나와있음.) 컴포넌트 디렉티브는 @Component() 데코레이터의 select 프로퍼티에 디렉티브 이름을 정의한다.

 

컴포넌트 디렉티브(Component Directive)

 

 

어트리뷰트 디렉티브(Attribute Directive)

템플릿파일에서 HTML 요소의 어트리뷰트와 같이 사용하는 디렉티브로 element의 모양이나 동작을 제어한다.

대표적인 예시로는 'ngModel'이 있다.

어트리뷰트 디렉티브(Attribute Directive)

ngModel은 양방향 바인딩에 사용되는 어트리뷰트 디렉티브이다. 위 예시처럼 Input 창에 어떠한 값을 입력하면 hero.name 값이 입력한 값으로 변경되며, 화면에도 입력한 값이 나오게 된다.

 

 

 

 

구조 디렉티브(Structural Directive)

DOM 요소를 반복 생성(ngFor), 조건에 의한 추가 또는 제거(ngIf, ngSwitch)를 통해 DOM 레이아웃(layout)을 변경한다.

 

구조 디렉티브(Structural Directive)

 

 

 

 

 

Directive 사용 예제

---

자세한 가이드는 https://angular.kr/guide/attribute-directives 를 참고한다.

 

https://poiemaweb.com/angular-component-built-in-directive 사이트에 들어가보면, 빌트인 어트리뷰트/구조 디렉티브에 대한 설명이 나와있는데, 이는 이벤트 처리에 따라 class, style을 바꿔줘야할 때 사용하면 유용하다.

 

 

실제로 사용했던 코드를 살펴보면 아래와 같다.

 

ngStyle directive를 이용한 코드

 

ngStyle 디렉티브를 이용해서 tree-node를 클릭했을 때, 클릭한 노드의 배경 색을 바꾸는 코드이다. 

 

코드 실행 결과

[style.backgroundColor] 프로퍼티를 이용해서 바꿔줄 수도 있지만, 여러 스타일이 추가되는 경우에는 ngStyle이 더 편리하다.

템플릿 파일에 스타일 코드가 들어가는게 싫은 경우에는 ngClass를 이용해서 클래스 명을 변경하고, css 파일에서 클래스 명에 따라 스타일 속성을 다르게 주면 된다.

 

 

 

 

 

 

참고 사이트

https://angular.kr/guide/architecture-components

https://poiemaweb.com/angular-component-built-in-directive

Angular Component - Built-in directive | PoiemaWeb