본문 바로가기
개발/Angular

[Angular] 앵귤러 데이터 바인딩(2) 양방향 & 단바향 :: 마이자몽

by 🌻♚ 2018. 10. 1.

저번 글에 이어서 데이터 바인딩 2번째 글을 씁니다.

양방향과 단방향 데이터 바인딩에 대해서 알아볼건데 저번 데이터 바인딩글에서 이미 단방향 데이터 바인딩을 했다.


{{}}를 사용한 Interpolation, []를 사용한 Property Binding 그리고 ()를 사용한 이벤트 바인딩.

이미 단방향 바인딩은 배운거다.


그러면 양방향과 단방향 바인딩의 차이점은 뭘까?

실습을 통해서 한번 알아보자.


일단 단방향 바인딩을 통해 코드를 작성해보자.

이전에 만들었던 컴포넌트들과 구별하기 위해 line3 컴포넌트를 하나 만들고 app.component.html에는 line3의 selector만 넣어준다.




1.단방향 바인딩


app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressSpinnerModule, MatRadioModule, MatCardModule, MatFormFieldModule, MatInputModule} from '@angular/material';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { Line3Component } from './line3/line3.component';
 
@NgModule({
  declarations: [
    AppComponent,
    Line3Component
  ],
  imports: [
    BrowserAnimationsModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
 
cs


material을 사용하고 이후에 양방향 바인딩을 하기위해 FormsModule을 넣어준다 import해준다.




line3.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-line3',
  templateUrl: './line3.component.html',
  styleUrls: ['./line3.component.css']
})
export class Line3Component {
  color: string = 'warn';
  value: number = 50;
  result: string = 'result';
}
 
cs


바인딩할 변수들을 선언해준다.




line3.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<mat-card>
  <mat-card-content>
    <h2></h2>
    <section>
      <mat-radio-group [value]='color'>
        <mat-radio-button value="primary">Primary</mat-radio-button><br>
        <mat-radio-button value="accent">Accent</mat-radio-button><br>
        <mat-radio-button value="warn">Warn</mat-radio-button>
      </mat-radio-group>
    </section>
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-content>
    <h2>Result</h2>
    <mat-progress-spinner [color]="color" [value]="value"></mat-progress-spinner>
  </mat-card-content>
</mat-card>
 
 
<br>
<br>
<br>
<br>
<br>
 
<div>
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>
</div>
 
<p>{{result}}</p>
 
cs


Interpolation과 Property Binding을 통해 ts파일에서 선언한 변수들의 값을 View로 출력한다.




View


바인딩한대로 radio button group의 값은 warn으로,

그리고 p 태그의 값은 result로 원하는대로 나왔다.


하지만, 여기서 우리가 원하는 것은, 라디오 버튼의 다른값을 클릭 했을때, 색이 변하고,

input에다가 글을 타이핑했을때,  p태그에서도 똑같이 값이 변하는것이지만, 단방향 바인딩 만으로는 원하는 결과를 얻지 못한다.

javascript를 사용해서 구현을 한다면, 이벤트리스너를 사용해서 DOM으로 값을 변경하는 방법으로 코드를 작성했을 것이다.


Angular에서는 양방향 바인딩을 통해 구현한다.





2.양방향 바인딩


양방향 바인딩은 Property Binding과 Event Binding을 동시에 해준다고 생각하면 쉽게 이해할수 있을것이다.

바인딩을 해줄때는 [(ngModel)]='바인딩 값' 으로 해준다.

양방향 바인딩을 해주면 html에서 ts파일에 관여할 수 있다.



line3.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<mat-card>
  <mat-card-content>
    <h2></h2>
    <section>
      <mat-radio-group [(ngModel)]='color'>
        <mat-radio-button value="primary">Primary</mat-radio-button><br>
        <mat-radio-button value="accent">Accent</mat-radio-button><br>
        <mat-radio-button value="warn">Warn</mat-radio-button>
      </mat-radio-group>
    </section>
  </mat-card-content>
</mat-card>
<mat-card>
  <mat-card-content>
    <h2>Result</h2>
    <mat-progress-spinner [color]="color" [value]="value"></mat-progress-spinner>
  </mat-card-content>
</mat-card>
 
 
<br>
<br>
<br>
<br>
<br>
 
<div>
  <mat-form-field>
    <input matInput placeholder="Input" [(ngModel)]='result' (keyup)="onKeyUp($event)">
  </mat-form-field>
</div>
 
<p>{{result}}</p>
 
 
cs


단방향 바인딩의 코드와 비교하여 어떤 부분들이 바뀌었는지 확인을 해보자.

mat radio group과 input 태그의 property binding이 빠지고 양방향 바인딩을 위해 [(ngModel)]이 추가되었다.


양방향 바인딩을 해줌으로써 mat-radio-group의 value값은 ts파일의 color변수과 연결되고,

input의 value값은 result변수와 연결된다.


keyup event는 ts파일에서의 변수가 변하고있는지 확인하기위해 로그를 찍을것이다.




line3.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-line3',
  templateUrl: './line3.component.html',
  styleUrls: ['./line3.component.css']
})
export class Line3Component {
  color: string = 'primary';
  value: number = 50;
  result: string = 'I just typed jamong';
 
  onKeyUp = (event) => {
    console.log(event.target.value);
  }
}
 
 
cs


단방향 바인딩에서 onKeyUp함수만 추가되었다.

로그를 통해서 양방향 바인딩을 하면 html에서 값을 변경하면 ts파일의 값도 변하고 있다는것을 확인할 수 있다.




View


양방향 바인딩을 완료했다.

이제 라디오 버튼을 클릭하면 프로그레스바의 색도 같이 변한다.


단방향 바인딩을 했을때, input태그의 값에는 아무것도 없이 Placeholder값만 있었는데,

양뱡향 바인딩 후, Placeholder의 값이 아닌 result변수의 값이 출력되고, Input 값을 변경하면 p태그도 같이 수정되는것을 확인할 수 있다.


앞으로 Angular 공부를하면서 정말 많이 사용하게될 기술일것이다.

댓글0