[Angular-09]angular directive

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

또한 Angular에서는 JavaScript로 번역되는 TypeScirpt라는 새로운 언어를 사용한다.

이 언어는 JavaScript에 Type을 추가한 언어로 좀더 객체지향적인 설계가 가능한 언어이다.

이 언어에 대해서 조금씩의 설명은 있겠지만 자세한 설명은 다루지 않을 계획이다.

필자는 아직 이 TypeScript를 강의로 제공할 생각이 없으므로 자세히 알고싶다면

https://www.typescriptlang.org/

를 참조하라.

angular에서는 3개의 veiw클래스가 존재한다.

각각 component, directive, pipe이고 이번에는 directive에 대해서 알아보도록 하자.

component는 tag혹은 id를 받아서 템플릿을 만들어 렌더링 하는데 쓰였다.

보통 id를 사용하는 경우는 없으므로 쉽게 말하면 임의의 tag를 새로만드는 것이 component이다.

반면 directive는 이미 있는 태그에 기능을 추가할 때 사용한다.

예를 들면 특정 p태그에 highlighting기능을 넣고싶을 경우, 기존 html에 없으므로 새로 기능을 추가해 줘야한다.

이러한 기능을 디렉티브(directive)라고 부른다.

한번 만들어 보도록 하자.

Directive 만들기

아래와 같이 명령어를 입력하자

ng g d(directive) <directive명>

이런식으로 hi라는 directive를 만들었다고 가정해보자.

그러면 아래와 같이 코드가 자동으로 만들어진다.

이렇게 두개가 만들어진다. spec은 손댈 필요가 없고 일반 directive를 보자.

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

@Directive({
  selector: '[appHi]'
})
export class HiDirective {

  constructor() { }

}

이런식으로 코드가 자동으로 생성된다.

이제 Directive를 사용한 예시를 몇가지 만들어 보도록하자.

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

}

HightlightDirective라는 새로운 Directive를 만들었다.

위의 코드들을 하나씩 설명해보자.

ElementRef - Angular에서는 ElementRef는 자기 자신을 의미한다. 이 Directive의 효과를 받는 엘리먼트 요소 자체를 의미한다.

el.nativeElement.style.backgroundColor - 자기 자신 엘리먼트의 style 요소의 backgroundcolor를 의미한다. 위의 코드는 노란색으로 바꿔 줘라는 뜻.

이제 실제 태그에서 어떤식으로 사용하는지 보도록 하자.

<p appHighlight>Highlight me!</p>

보면 알겠지만 selector를 appHightlight property에 연결되게 했다. 위와 같이 사용하면 된다.

한번 시행해보자.

해당 p태그에 appHightlight라는 프로퍼티를 추가해주었더니 해당 Directive가 적용된걸 확인할 수 있다.

그러면 이번에는 이벤트로 디렉티브를 적용되게 해보자.

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) {
  }

  @HostListener('mouseenter')
  onMouseEnter() {
    this.highlight('cyan');
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color : string){
    this.el.nativeElement.style.backgroundColor = color;
  }
}

이번에는 코드가 조금 더 추가되었다. 여러 메소드들이 추가됬는데 새로추가된 개념을 보도록 하자.

HostListener - 이 데커레이터는 이벤트를 붙혀준다. 각각의 이벤트를 붙는것을 보도록하자.

mouseenter - 마우스가 특정 엘리먼트에 들어왔을 때를 감지한다.

mouseleave - 마우스가 특정 엘리먼트에 나갔을 때를 감지한다.

위의 코드는 mouse가 들어올때 색이 시안색으로 바뀌고 나갈때는 색을 다시 없애버린다.

<p appHighlight>Highlight me!</p>

확인하는 코드는 크게 바꿀게 없다. 한번 테스트해보면 마우스가 올라가면 색이 변하고 내려가면 색이 취소된다.

<input type="radio" name="colors" (click)="color='red'">
<input type="radio" name="colors" (click)="color='green'">
<input type="radio" name="colors" (click)="color='blue'">
<p [appHighlight]="color">I like you</p>

이번에는 변수 바인딩 까지 해보도록하자.

위의 코드를 해석해보면 appHightlight라는 프로퍼티에 color라는 변수를 바인딩했다.

그리고 위의 radio input들을 보면 click에 color='red'라는 타입스크립트 구문이 바인딩 됬다.

위의 코드를 해석하면 radio버튼을 클릭하면 color라는 변수에 해당 값이 들어가게 되고

appHightlight디렉티브에 color라는 변수가 들어가게 되는 것이다.

그럼 타입스크립트 코드를 보도록 하자.

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  @Input('appHighlight')
  color: string;

  constructor(private el: ElementRef) {
    this.color = null;
  }

  @HostListener('mouseenter')
  mouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.color;
  }

  @HostListener('mouseleave')
  mouseLeave(){
    this.el.nativeElement.style.backgroundColor = null;
  }
}

보면 새로운 부분들이 몇개 추가 됬다.

Input - 이 데커레이터를 변수에 지정하면 이 변수는 외부에서 입력받는다는 뜻이다. 즉 외부에서 사용할 수 있게 된다.

이 코드를 보면 appHightlight는 color의 값의 변화를 민감하게 감지한다.

이제 코드를 실행해 보자.

이러한 코드가 있다. 이제 체크하고 마우스를 올려보자

작동하는걸 확인할 수 있다.