본문으로 바로가기

[AngularJS] One time binding

category 분류없음 2018.11.22 22:54

Angular 에서 View 와 Component 에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 기능을 제공하는데, 이를 Data Binding (데이터 바인딩) 이라고 한다.

그리고 Angular 의 데이터바인딩 방법에는 크게 두 종류가 있는데 다음과 같다.


1. Two-Way Data Binding : 양방향 바인딩. Component와 View의 상태 정보를 자동으로 일치시켜 주는 기능

2. One-Way Data Binding : 단방향 바인딩. Component에서 View쪽으로 혹은 View에서 Component쪽으로 한 방향으로 데이터를 바인딩


특히 자주 사용하는 단방향 바인딩 방식 중 Interpolation 은 Component에서 선언한 속성을 View에서 사용할때 쓰인다. 

형태는 다음과 같다.

ex. {{value}}


이때 One time binding 하는 방법이 있는데, 일단 그냥 바인딩 하게 되면 scope 변수의 변화에 따라 View에 출력되는 값이 계속 바뀌는데 이럴 경우 변수를 watch 하고 기 때문에 바인딩된 변수가 많을 수록 메모리를 더 많이 사용하게 된다. 

따라서  One time binding 하게 되면 초기에 설정한 scope 변수 값만 뷰에 출력 되고 이후 그 변수의 값이 변경 되더라도 View에 업데이트하지 않기 때문에 메모리를 절약할 수 있다.

One time binding 형태는 다음과 같다.

ex. {{::value}}


참고 사이트 

- https://moon9342.github.io/angular-lecture-databinding

- http://blog.jeonghwan.net/2016/08/20/angular-facts-easy-to-miss.html


댓글을 달아 주세요