IT 회사에서 즐겁게 지내기!

알게 모르게 계속 사용했던 Directive에 대해서 살펴보겠습니다.

Directive를 번역하자면 지시자 라고 할 수 있겠네요.

HTML에 Angular가 간섭할 부분을 표시한다라고 이해하면 쉽습니다.

Component 역시 template이 포함된 Directive로 정의하는데요.

<app-root> 기억하시죠?

이 부분에 app-component를 표출해달라는 표시였습니다.

Component는 별도로 치고, Directive에 2가지가 더 있습니다.

Structural Directive와 Attribute Directive입니다.

2가지 Directives의 차이는 DOM을 다루는 방식입니다.

Structural Directive는 DOM을 추가하거나 제거합니다.

Attribute Directive는 이미 있는 DOM에 스타일이나 동작을 부여합니다.

Angular가 간섭해야함을 표시한다는 걸 기억해주세요.

오늘은 먼저 Attribute Directive를 살펴볼게요.

Angular의 Directive는 마치 HTML에 존재하는 속성처럼 사용됩니다.

스스로 custom directive를 정의할 수도 있습니다.

하지만 이미 만들어진 ngStyle을 보며 directive를 이해해보죠.

<h3 
  [ngStyle]="{
    'color':budget<=1000?'red':'black',
    'background-color':budget<=1000?'yellow':'transparent'}">
      My Budget: &#8361;{{budget}}</h3>

h3 태그에 ngStyle Directive를 추가하였습니다.

마치 html 속성에 property binding을 한 모양새죠.

ngStyle의 값으로 css와 같이 key, value 쌍을 넣었습니다.

그리고 조건문도 들어갔죠.

budget 값이 1000이하면 노란배경에 빨간글씨가 됩니다.

ngStyle 적용 화면

ngStyle이라는 건 원래 html에 정의되어있지 않습니다.

즉 태그에 ngStyle이라고 표시되면 Angular가 간섭을 한다는 의미죠.

ngStyle의 실제 코드를 대략 살펴보면 아래와 같습니다.

@Directive({ selector: '[ngStyle]' })
class NgStyle implements DoCheck {
  set ngStyle: {...}
  ngDoCheck()
}

마치 Component에서처럼 selector가 존재하죠.

Anguar는 저 selector를 찾아서 HTML에 스타일을 입히는 겁니다.

ngStyle 뿐 아니라 ngClass와 같이 정의된 directive가 더 있습니다.

기회가 되면 차차 사용하면서 배우구요.

다음에는 Structural Directive를 사용해보면서 익혀보겠습니다. 

소스주소: https://github.com/jsrho1023/account-book