[Angular] 앵귤러 데이터 바인딩 정리

Angular2 버전 이후를 기준으로 정리한 글입니다.

앵귤러의 데이터 바인딩은 컴포넌트와 뷰 사이에 연결 고리를 맺는 것이다.

앵귤러에는 데이터 흐름에 따라 크게 단방향 바인딩과 양방향 바인딩이 있고 단방향 바인딩의 경우 세부적으로 삽입식, 프로퍼티 바인딩, 이벤트 바인딩 존재 한다.

아래 그림은 DOM과 Componnent 사이에 앵귤러 데이터 바인딩을 설명한 것이다.

1. 삽입식(interpolation)

<div>{{userName}}</div>
<p>{{getTitle()}}</p>

삽입식은 이중 중괄호 사이에 컴포넌트의 변수 혹은 함수를 넣으면 연산의 결과 문자열이 뷰에 반영된다.

삽입식에서는 오래 걸리는 연산이 존재하는 함수를 이용할 경우 심각한 성능 저하가 발생할 수 있기 때문에 주의해야 한다.

2. 프로퍼티 바인딩

<img [src]="imageUrl">
<h2 [textContent]="'Movie: ' + getTitle()"></h2>

프로퍼티 바인딩은 DOM의 속성에 표현식을 바인딩 하는 것으로 class, style 등의 속성에도 바인딩이 가능하다.

위의 첫번째 예제에서는 img 태그의 src 속성에 컴포넌트의 imageUrl 변수의 값을 바인딩하고 있다.

두번째 예제에서는 h2 태그의 textContent 속성에 'Movie: ' 문자열과 컴포넌트의 getTitle()함수 반환 값을 바인딩하여 속성의 값을 생성하고 있다.

3. 이벤트 바인딩

  <input type="number" name="user-id" #userIdInput />
  <button type="button" (click)="findUser(userIdInput.value)">검색</button>

이벤트 바인딩은 뷰에서 이벤트가 발생할 때 처리할 컴포넌트 로직을 바인딩 한다. 

위의 예제에서는 button에서 클릭 이벤트가 발생할 때 findUser 함수를 실행하고 인자로 input 태그의 값을 전달하는 것을 확인할 수 있다.

4. 양방향 바인딩

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

양방향 바인딩은 뷰와 컴포넌트의 변화가 둘 중 한곳에서 일어나면 다른 한곳에서 데이터가 바인딩 되는 것이다.

양방향 바인딩을 사용하기 위해서는 위의 예제의 input 태그처럼 ngModel 지시자를 이용하면 손쉽게 적용할 수 있다. 

p 태그에서 username을 속성 바인딩을 통해 출력하기 때문에 input에서 발생한 변경이 즉시 반영 되는것을 확인 할 수 있다.

앵귤러에서 양방향 바인딩은 ngModel 지시자 내부에서 프로퍼티 바인딩과 이벤트 바인딩의 단방향 바인딩을 이용하여 구현된 것이라고 한다.