angularjs one way, two way 바인딩 알아보기

AngularJS의 가장 큰 장점은 손쉽게 Two-way binding(양방향 바인딩)을 사용할 수 있다는 점이다. 데이터, 즉 모델값을 뷰에 바인딩하기 위하여 단방향, 양방향 바인딩을 사용하는데 이 둘의 차이점은 다음과 같다.

# 단방향과 양방향 바인딩의 차이점

i. 단방향 바인딩(one-way binding)
; 단방향 바인딩은 처음 모델이 가진 값을 뷰에 표현하고 나중에 모델이 변경되더라도 업데이트 되지 않는다.

ii. 양방향 바인딩(two-way binding)
; 양방향 바인딩은 모델을 뷰에 바인딩함과 동시에 이후 모델이 변경되는 경우를 감지하여 지속적으로 뷰를 업데이트 해준다.


이 둘의 가장 큰 차이점은 모델값이 변경에 따라 뷰 콘텐츠를 계속해서 업데이트 할 것인가이다. 사실 모두 양방향으로 설정해둔다 해도 뷰가 달라지는 것은 없다. 다만 계속해서 데이터 변화를 감지하고 바인딩해야하기 때문에 성능 및 리소스 관리에 좋지 않다.

결국 단방향 바인딩만으로 표현가능한 요소를 양방향으로 사용하게 되면 불필요한 리소스 및 성능 저하로 이어지므로 꼭 필요한... 적재적소에 알맞는 방법을 사용하는 것이 무엇보다 중요하다.


AngualrJS 1.3 이후부터는 표현식의 단방향 바인딩을 위하여 아래와 같이 사용이 가능하게 되었다. 즉 아래 예제 두 가지는 동일한 표현식이나 데이터 바인딩이 단방향 그리고 양방향으로 구분될 수 있다.



단방향 바인딩과 양방향 바인딩을 사용하기 위한 방법으로 아래의 ng-bind 그리고 ng-model 디렉티브가 많이 언급된다. 이 둘은 단방향 또는 양방향 바인딩 기능을 제공하는 디렉티브이다.

# ng-bind 그리고 ng-model

여기서는 간단하게 두 디렉티브의 차이점만 알아보도록 하겠다. 아래의 코드를 보자.

위 코드에서 위에 있는 두개의 소스코드는 단방향인 one-way binding이고 두번째에 위치한 코드는 양방향 바인딩이다. 표현식으로 사용한 {{ title }}은 양방향 바인딩이지만 모델로 사용된 title 앞에 콜론을 두 개 붙일 경우 단방향인 표현식으로 바뀌게 된다. 이는 AngularJS 1.3부터 사용이 가능한 방법이다.