[Angular/앵귤러] ngModel 이란? ngModel 디렉티브란?

안녕하세요 질서정연입니다! 🧚‍♂️

저는 요즘 앵귤러를 공부하고있는데요! 

 

오늘은 Angular ngModel에 대해서 알아볼게요 

ngModel은 directive 예요!

근데.. 디렉티브가 뭘까요?

 

디렉티브가 뭐지 ?

 

ngModel이 무엇인지 알아보기 전에 먼저 디렉티브가 무엇인지부터 살펴볼게요 ~ 

 

 

디렉티브(Directive) 란?

---

directive는 앵귤러 프로그램의 요소에 동작을 추가하는 클래스 입니다. 

Angular의 기본 제공 지시문을 사용하여 양식, 목록, 스타일 및 사용자가 보는 내용을 관리 할 수 있습니다.

 

 

directives는  Components, Attribute directives, Structural directives 세가지 종류가 있습니다. 

 

1. Components : 템플릿이 있는 directive, 이러한 유형의 지시문은 가장 일반적인 directive .

 

2. Attribute directives:  element , Component 또는 다른 directive 의 모양이나 동작을 변경하는 directive

 

3. Structural directives: DOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경하는 directive

 

 

이번 시간에는 Attribute directives와 structural directives에 대해 알아보아요 ~ 🌈

 

 

 

Built-in attribute directives

---

attribute directives 는 다른 HTML element와 attribute, properties, component의 행동을 듣고 , 수정 합니다. RouterModule 과 FormsModule 같은 많은 NgModule 들이 그들의 고유한 attribute directives를 정의합니다. 가장 일반적인 attribute directive 는 아래와 같습니다. 

 

• NgClass : CSS class들을 추가하고 지워줍니다
• NgStyle : HTML style을 추가하고 지워줍니다.
• NgModel : HTML form element 요소에 양방향 데이터 바인딩을 추가합니다. 

 

양방향 데이터 바인딩 ?? 그게 무슨말이지 ?

 

저는 NgModel을 사용할 때 이렇게 사용 했어요 !

 

 

-Component.ts

import { Component, Input, OnInit, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  @Input() visible1 : boolean = false; // 받는 역할
  @Output() sendMyEvent : EventEmitter<any> = new EventEmitter(); //보내는 역할
  id: string ='';
  pwd:string ='';

// ... 생략
  }

}

 

-Component.html

<div>Wellcome</div>
<input type="text" placeholder="id" [(ngModel)]="id"/>
<input type="text" placeholder="password" [(ngModel)]="pwd"/>
<button (click)="tryToLogin()">Login</button>

 

Componenet.ts 을 보시면 id: string, pwd: string 으로 두 가지 변수를 선언 해 뒀어요 

저는 사용자가 HTML에서 입력을 하면 그 입력값을 받아 Component에 있는 id, pwd에 넣어주고 싶었는데요,

이때 ngModel을 사용하면 document.getElementId 이런식으로 html에서 값을 가져왔던 방식을 쓰지 않아도 

Component의 변수에 값이 전달 됩니다! 

 

이런것을 양방향 데이터 바인딩이라고 해요 ~ 

 

좀 더 자세히 알아볼까요 ~ 🏃‍♂️

 

Displaying and updating properties with ngModel

---

 

NgModel 디렉티브를 사용하면 유저가 데이터 속성을 변경 하였을때 이를 표시하고 업데이트 해 줍니다.

 

ngModel 을 사용하려면 모듈에 FormsModule을 import 해 주어야 합니다.모듈에 대해서도 다음에 좀 더 자세히 정리 해 보겠습니다.

 

~app.module.ts~

import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
/* . . . */
@NgModule({
  /* . . . */

  imports: [
    BrowserModule,
    FormsModule // <--- import into the NgModule 여기에 추가!!
  ],
  /* . . . */
})
export class AppModule { }

app.module.ts의 imports 에 FormsModule을 추가 해 주면 import를 통해 다른 컴포넌트들이 해당 모듈의 기능을 사용할 수 있게 됩니다!

 

~app.component.html~

<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel">

그 다음 html에 [(ngModel)] 을 추가 해 주면 component의 currentItem.name과 html 이 연결됩니다!! ><

 

 

~app.component.html~

<input [ngModel]="currentItem.name" (ngModelChange)="setUppercaseName($event)" id="example-uppercase">

ngModelChange는 이벤트 바인딩으로 특정 이벤트가 발생 했을 시

조금 전 본 변수 바인딩처럼 Component에게 이벤트 사항을 전달합니다!

 

 

이제 디렉티브가 어떤건지, NgModel이 어떤건지 조금 느낌이 오셨나요 ?

그럼 Built-in structural directive에 대해 알아볼게요 !

 

 

 

Built-in structural directives

---

structural directive는 HTML layout을 담당합니다. structural directive는  host element에 adding, removing, manipulating 이 있을 떄 DOM 구조를 만들고 수정 합니다. 가장 일반적인 structural directive에는 NgIf, NgFor, NgSwitch 가 있습니다!

 

• ngIf :  조건적으로 하위 뷰를 생성하거나 삭제 할 수 있다 (예를 들어 component의 value값이 true이면 엘리먼트가 보이게 할 수 있다) 
• ngFor : list의 아이템 노드를 반복한다. 
• ngSwitch :  다른 view로 전환 한다. 

 

ngIf  예시

---

<div *ngIf="currentCustomer">Hello, {{currentCustomer.name}}</div>

이때 Component에 currentCustomer라는 value가 있다면 이 div 태그는 사용자에게 보일거예요왜냐하면 *ngIf 가 true일 때 이 태그가 보여지기 때문이에요 ~currentCustomer가 null이거나 false라면 이 태그가 보여지지 않습니다. 이처럼 ngIf를 조건문처럼 사용하여 요소를 보이거나 보이지 않게 해 줄 수 있어요 !

 

ngFor 예시

---

ngFor 은 리스트의 아이템들을 나타나게 해 준다고 했었죠 ~

<div *ngFor="let item of items">{{item.name}}</div>

1. 먼저 싱글 아이템을 보여 줄 HTML block을 만들어 줍니다.2. *ngFor 에 let item of items 를 할당 해 줍니다!

 

for 문을 돌면서  items에 있는 모든 item들이 보여지게 되겠죠 !

 

 

ngSwitch 예시

---

<div [ngSwitch]="currentItem.feature">
  <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
  <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
  <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
  <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
<!-- . . . -->
  <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item>
</div>

앞의 ngIf와 ngFor 처럼 ngSwitch도 switch문처럼 작성하여 특정 element를 보여지게 , 숨기게 할 수 있습니다!!

 

어때요 좀 이해가 .. 되셨나요 ?

 

 

다음에는 모듈과 컴포넌트에 대해 더 자세히 알아볼게요 !!

 

 

 

---

 

 

 

모든 내용은 Angular docs 를 참조하여 작성했습니다 ! https://angular.io/guide/built-in-directives

Angular

 

 

좋은 하루 되시고 즐코 하세요 ~ 😎 🔆