앵귤러 양방향 바인딩의 이해

앵귤러에서는 총 4가지의 데이터 바인딩을 제공한다. 그리고 그 바인딩은 데이터가 어떻게 사용되는지에 따라 다르게 사용할 수 있다.

https://javascript.plainenglish.io/what-is-behind-two-way-data-binding-in-angular-36dfe310b539

여러가지 데이터 바인딩 종류

1. 인터폴레이션

<li>Name: {{ userName }}</li>
<li>Email: {{ userEmail }}</li>

가장 간단하게 DOM에 컴포넌트의 속성 또는 변수의 값을 표시하는 방법이다.

2. 프로퍼티 바인딩

<input type="email" [value]="userEmail">

프로퍼티 바인딩은 컴포넌트의 특정 변수의 값을 정해진 프로퍼티에 할당하는 방법이다. 상기 예시에서 type과 value는 <input> 태그의 속성이다. 아래 예시는 프로퍼티 바인딩의 또 다른 예제이다.

<!-- apply background-color to div -->

<div [style.background-color]="selectedColor">

<!-- class 'selected' will be applied to div, if the value of 'isSelected' becomes 'true' -->

<div [class.selected]="isSelected">

3. 이벤트 바인딩

DOM으로부터 이벤트가 발생했을 때 컴포넌트의 특정 메서드를 발생시키는 바인딩이다.

<button (click)="registerUser()"></button>

상기 예시에서는 버튼이 클릭되는 이벤트가 발생하면 registerUser() 메서드가 실행된다.

4. ngModel을 사용한 양방향 바인딩

<input type="email" [(ngModel)]="userEmail">

양방향 바인딩은 데이터를 말 그대로 양쪽 방향에 대해 다룰 수 있게 해준다.

• 컴포넌트에도 정의되어 있는 userEmail 데이터 속성은 input 태그에 대한 값으로 사용된다.
• 반대로 사용자가 input 태그의 값을 바꾸게 된다면 컴포넌트의 프로퍼티인 userEmail의 값도 자동으로 업데이트 된다.
• 즉 프로퍼티의 값은 컴포넌트로 입력 값으로 업데이트되고, 입력 값은 다시 컴포넌트 값으로 업데이트 된다.

이게 어떻게 가능할까?

실제로 앵귤러에서의 양방향 바인딩은 크게 두 가지 스텝: 프로퍼티 바인딩과 이벤트 바인딩으로 나누어질 수 있다.

위 4가지 바인딩의 예시를 가만히 생각해보면 ngModel 디렉티브를 사용하지 않고도 양방향 바인딩을 할 수 있다.

<input [value]="userEmail" (input)="userEmail = $event.target.value">

<p>Hello {{userEmail}}!</p>

단계 별로 어떤 일이 일어나냐면..

1. [value] = "userEmail" 은 userEmail과 input 엘리먼트의 value 프로퍼티에 바인딩한다.
   1. <input value="userEmail">의 value 값은 단순히 “userEmail” 값을 가지는 프로퍼티이다.
   2. <input [value]="userEmail">의 [value] 값은 'userEmail'을 표현식으로 인식한다. 즉 단순한 값이 아니라 어떤 값을 가지고 있는 변수로 인식한다.
2. (input) = "expression"은 input 엘리먼트에 이벤트 표현식을 바인딩하는 선언적인 방법이다.
   1. <input [value]="userEmail" input="sometThing">에서 input 프로퍼티는 아무데에도 사용되지 않는 단순한 프로퍼티이다.
   2. <input (input)="userEmail == $event.target.value">에서 (input) 프로퍼티는 $event.target의 값을 취해서 userEmail로 할당한다.
3. userEmail = $event.target.value 표현식은 input 이벤트가 발생했을 때 실행된다. 즉 이 표현식은 <input> 태그에 진입할 때 발생된다.
4. $event 는 앵귤러에 의해 보여지는 이벤트 바인딩을 표시하는 표현식이다. 이벤트의 페이로드가 들어가 있다.

ngModel의 이해

지금까지 알아봤던 것처럼, ngModel은 실제로 프로퍼티와 이벤트 바인딩이다.

<input [ngModel]="userEmail" (ngModelChange)="userEmail = $event">
<p>Hello {{userEmail}}!</p>

[] 와 ()를 함께 사용한다면

• []는 프로퍼티 바인딩,
• ()는 이벤트 바인딩을 의미한다.

정리

1. 인터폴레이션 (단순 값의 표시) : {{value}}
2. 프로퍼티 바인딩 : [property] = "value"
3. 이벤트 바인딩 : (event) = "function"
4. 양방향 바인딩 : [(ngModel)] = "value"

4번, 양방향 바인딩은 2번 + 3번이다.