Angular.js v1.0 Tip
ngBind를 고려해 보자
앵귤러를 사용하다 보면 인터폴레이션 문자열이 순간적으로 나오는데 왜 그러는지 또 어떻게 해결해야 하는지 의문이 든다. 인터폴레이션 문법을 사용했던 손쉽게 타이핑할 수 있기 때문인데 사실은 인터폴레이션을 사용한 곳의 모든 코드를 ngBind 디렉티브로 변경해서 사용한다. 그러면 스콥 변수에 데이터가 할당될 때까지는 빈 문자열이 출력 되기 때문이다.
1 | <p>Hello </p> |
One Time Binding (::)을 사용하자
그럼에도 불구하고 인터폴레이션을 사용해야 할때는 원타임바인딩(One time binding)을 사용하는 것을 고려해 볼 수 있다. 일단 그냥 바인딩 하게되면 스콥 변수의 변화에 따라 뷰에 출력되는 값이 달라진다. 이것은 스콥에서 그 바인딩된 변수를 감시(watch)하고 있기 때문인데 바인딩된 변수가 많을수록 감시해야 할 것은 많아지고 브라우져는 메모리를 더 많이 사용하게 된다.
한편 원타임바인딩을 사용하게 되면 스콥변수에 할당된 초기값만 뷰에 출력된다. 이후 그 변수의 값이 변경 되더라도 뷰는 업데이트되지 않는다. 이것은 스콥 변수가 바인딩된 변수를 감시하지 않기 때문이며 그만큼 메모리를 절약할 수 있다.
1 | <p>Normal binding: <b>Hello {{name}}</b></p> |