[Angular-15]값의 동적 변경과 angular model(NgModel)

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

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

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

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

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

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

https://www.typescriptlang.org/

를 참조하라.

먼저 시작하기전에 예제파일을 만들도록 하겠다.

아래와 같은 예시이다.

ng n myapp

ng g c TwoWayBound

먼저 ng n으로 앵귤러 앱을 만들고 ng g c로 컴포넌트를 새로 만든다.

<!--app.component.html-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<app-two-way-bound></app-two-way-bound>

메인 루트에 가서 새로 만든 컴포넌트를 추가한다.

// two-way-bound.component.ts
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-two-way-bound',
  templateUrl: './two-way-bound.component.html',
  styleUrls: ['./two-way-bound.component.css']
})
export class TwoWayBoundComponent implements OnInit {
  mydata: string;

  constructor() {
  }

  ngOnInit() {
    this.mydata = 'hi';
  }

}

위처럼 값을 받기위해서 mydata를 받는다. 초기 값으로 hi로 고정해준다.

<!--two-way-bound.component.html-->
<hr>
<input type="text" [value]="mydata"><br>
<span>{{mydata}}</span>

위와같이 코드를 작성해보자. value는 mydata로 바인딩되어 있다.

필자가 원하는건 mydata가 바뀔때 위의 span태그 값도 바뀌게 하고싶다.

과연 바뀔까?

ng serve

서버를 한번 시작해보자.

값은 처음에는 둘다 hi로 되있다. 값을 바꿔보도록하자.

값이 바뀌지 않는다.

mydata를 참조하고 있는 변수들 조차도 바꼈는지 안 바꼈는지 일단 관심이 없다.

분명 한 컴포넌트 내의 필드인데도 말이다.

그 이유는 여러분이 값을 바꾸었다 하더라도 이게 mydata를 바꾼건 아니기 때문이다.

그래서 값을 변경할 때 무조건적으로 이벤트 리스너를 사용해주어야 한다.

<!--two-way-bound.component.html-->
<hr>
<input type="text" [value]="mydata" (change)="onValueChange($event)"><br>
<span>{{mydata}}</span>

위와 같이 변경해준다. change에 바인딩을 해준다.

파라메터로는 이벤트를 넘겨준다.

// two-way-bound.component.ts
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-two-way-bound',
  templateUrl: './two-way-bound.component.html',
  styleUrls: ['./two-way-bound.component.css']
})
export class TwoWayBoundComponent implements OnInit {
  mydata: string;

  constructor() {
  }

  ngOnInit() {
    this.mydata = 'hi';
  }

  onValueChange($event) {
    this.mydata = $event.target.value;
  }
}

그 다음 그에 맞는 이벤트를 만들고 this.mydata에 이벤트의 타겟을 밸류를 가져온다.

이제 mydata에 달아준다.

이제는 mydata가 바뀌었기 때문에 실제 값도 바뀌는걸 확인할 수 있다.

실제로 바뀌는걸 확인할 수 있다.

하지만 매번 이렇게 하는건 조금 귀찮다.

이를 획기적이게 줄일 수 있는게 있다. 바로 NgModel이다.

NgModel을 사용하며 바꾸는 방법을 보도록하자.

// app.module.ts
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';


import {AppComponent} from './app.component';
import {TwoWayBoundComponent} from './two-way-bound/two-way-bound.component';


@NgModule({
  declarations: [
    AppComponent,
    TwoWayBoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

먼저 app.module.ts를 바꾸자.

어느 부분을 바꿨는지 보자.

import {FormsModule} from '@angular/forms';

imports: [
  BrowserModule,
  FormsModule
],

FormsModule을 import해주고 앵귤러 모듈에서 사용하게 임폴트해준다.

<!--two-way-bound.component.html-->
<hr>
<input type="text" [(ngModel)]="mydata"><br>
<span>{{mydata}}</span>

그 다음 위와 같이 바꿔준다. 과연바뀔까?

쉽게 바뀌는걸 확인할 수 있다.

이렇게 특정 값의 변경으로 바로 변수에 영향을 미치고 싶다면 ngModel을 양방향 바인딩에 넣으면된다.

양방향 바인딩은 아직 설명하기는 이른 개념이므로 다음에 설명하도록 하겠다.