Angular - Directives

anrnyeondo·2022년 10월 20일
0

JS + Angular

목록 보기
5/7

들어가기 전 ....

이제 앵귤러는 서비스와 옵저버블 까지 작성하면 정리한 부분이 마무리 될거 같다. 사실 기초적인 문법 정도만 숙지하고 바로 소스 코드를 보러 갔기 때문에 실제 코드를 보는 과정에서는 더 어려움이 있엇다... 특히 구조를 파악하는 과정에서 문제점이 많았는데 이는 나중에 또 이야기 해보겠다.


디렉티브(Directive)

디렉티브는 Angular 애플리케이션 안에 있는 엘리먼트에 어떤 동작을 추가하는 클래스를 의미합니다. Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공 합니다.

- Angular 공식 Docs -

위의 말을 다시 한 번 정리해보면

  • 템플릿이 렌더링될 때 DOM의 구조를 디렉티브의 로직에 따라 변형 시킬 수 있다.


종류

  • 컴포넌트(Components)
    템플릿이 존재하는 디렉티브, 디렉티브 중에서는 컴포넌트 타입이 가장 많이 사용된다.

  • 속성 디렉티브(Attribute directives)
    엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 디렉티브.

  • 구조 디렉티브(Structural directives)
    조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 디렉티브.

위에서 볼 수 있듯이 컴포넌트 또한 하나의 디렉티브 임을 알 수 있다.


속성 디렉티브(Attribute directives)

속성 디렉티브는 HTML 요소, 속성, 프로퍼티, 컴포넌트의 동작을 다룰 수 있게 된다.

자주 사용하는 속성 디렉티브

  • NgClass
    CSS 클래스를 다룰 수 있게 된다.

  • NgStyle
    HTML 스타일을 변경 가능하다.

  • NgModel
    HTML 폼 요소에 양방향 데이터 바인딩을 연결. 즉, 한 쪽에서 데이터를 수정하면 다른 쪽에도 반영 된다.

NgClass

여러 개의 클래스를 추가/제거 하는데 사용할 수 있다.

단, 한 개의 클래스를 추가/제거 하기 위해선 NgClass 보다는 클래스 바인딩을 사용하는 것이 더 좋다고 공식 문서에서 언급 되었다.

// 표현식으로 바인딩 isSpecial의 값에 따라 결정 된다.
<div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>


// 메소드로 바인딩

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS 클래스는 컴포넌트 프로퍼티 값에 따라 추가되거나 제거된다.
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

NgStyle

컴포넌트 상태에 따라 달라지는 여러 인라인 스타일을 동시에 지정 가능.

currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS 스타일은 컴포넌트 프로퍼티 값에 따라 지정됩니다.
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

NgModel

데이터 프로퍼티의 값을 화면에 표시할 수 있으며, 사용자가 이 값을 변경했을 때 클래스 프로퍼티에 반영.

[()] 바인딩과 [] ()로 나눠서 바인딩하는 방법이 존재한다.
[()] 바인딩은 단순히 프로퍼티를 바인딩하는 방법이라 프로퍼티를 각 이벤트에 커스터마이징 하기 어렵다.
그에 비해 []()를 나눠서 사용하면 []에는 프로퍼티를 바인딩하고 ()에는 이벤트를 바인딩하여 원하는 이벤트에 맞게 프로퍼티를 바인딩할 수 있게 된다.

/* ... */ // form module import 

<label for="example-ngModel">[(ngModel)]:</label>
// [()] 바인딩
<input [(ngModel)]="currentItem.name" id="example-ngModel">
 
// []와 ()로 나눠서 바인딩
<input [ngModel]="currentItem.name" 
	   (ngModelChange)="setUppercaseName($event)"
	   id="example-uppercase">

구조 디렉티브(Structure directives)

HTML의 구조를 직접 조작할 수 있다. 구조 디렉티브는 조건에 맞는 엘리먼트를 DOM 트리에 추가하거나, 제거, 조작하는 방식으로 DOM 구조를 변형한다.

자주 사용하는 구조 디렉티브

  • ngIf
    조건문이 참일 경우 특정 요소를 DOM에 추가/제거 할 수 있다.

  • ngFor
    배열에 있는 항목을 반복한다.

ngIf

설명이 딱히 필요 없이 직관적이다 위에서 언급한 것과 같이 조건이 참일 경우 DOM에 추가하고 거짓이면 DOM에서 제거한다.

<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>

ngFor

java의 for each 구문이나, python의 for 구문 처럼 주어진 iterable한 프로퍼티를 순회하며 반복한다.

// items = [{name: '1'}, {name: '2'}, {name: '3'}]
<div *ngFor="let item of items">{{item.name}}</div>

// 동치
<div> '1' </div>
<div> '2' </div>
<div> '3' </div>

// 인덱스를 받아서 사용할 수 도 있다.
<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>

Reference

https://angular.io/docs

0개의 댓글