AngularJS $watch

$watch란 무엇인가?

AngularJS는 '안굴러'가는 '자바스크립트'가 맞다...

'$watch는 두려워할 정도로 어렵지 않으며 단순하고 또 유용하다'고 누군가의 기술 블로그에서 본적이 있었다... 물론, AngularJS에 대해서 선행지식이 어느 정도 있다면이라는 가정이 생략되었지만 말이다.

처음 이 $watch라는 녀석을 접했을 때에는 어느 상황에 써야되는지, 또한 $apply와는 뭐가 다른것인지 한참을 헷갈렸었다. (뭐... 혼자서 말도 안되게 무료 코드스쿨 강의만 보면서 B2C 웹앱을 만드는 중이었으니까...) 뭐 그렇다고 지금은 완벽히 명세를 이해했다는 것은 아니지만 아무런 스키마없이 개발을 해야했던 그 시기와는 좀 다르게 '써야 할 때'와 '고쳐야할 곳'을 어느정도 알겠다는 느낌(?!)은 온다.

$watch(watchExpression, listener, [objectEquality]);

Registers a listener callback to be executed whenever the watchExpression changes.

위 내용은 AngularJS의 $watch 메서드에 대한 공식 명세이다. 잘 보면 알겠지만 잘 보아도 모를 내용이다.

첫번째 인자인 watchExpression이 변하는 것을 감지하여 실행된다 정도로 알면 되겠다. 그런데 이것은 어떠한 상황에 적용되는 것인가??

1.외부연동

외부연동이 무엇을 기준으로 외부와 내부를 나누는가 부터 헷갈리기 시작한다면 당신은 나와 비슷한 과이다. 그러므로 친절히 설명은 하겠지만 내가 적는 이 글자들 역시도 내가 잘 못알아 먹기 때문에 세심한 주의와 다른 레퍼런스의 참고를 바란다.

예를 들면 제이쿼리나 다른 프레임워크를 AngularJS와 병행하여 사용할 때 스코프 내 변경 사항이 있을 때 다른 프레임워크에서 해당 변경 사항에 맞는 코드를 호출할 수 있도록 만들어 주는 것이다.

2.내부연동

그렇다면 내부연동할 때는 무엇을 해야하는거지?? 그럴때에는 $apply 메서드를 사용하면 된다. 다른 프레임워크에서의 변경사항이 발생했을때 AngularJS에서는 그 변화를 인지하지 못하므로 그것을 명시적으로 해결할때 사용하는 것이다.

기본적인 컨셉이 잡혔다면 쉬운 예제를 하나 만들어보도록 하자.

** 물론 실제 개발을 하면서 이렇게 무식하게 한글 텍스트를 '감시'하면서 리스트를 늘리는 일은 극히 드물것이다. 그렇지만 이게 가장 효과적으로 보여줄 수 있는 예제임에는 분명하다. alert으로 정신건강을 해하는 것 보다는...

코드를 보자. 첫번째 인자는 위에서 설명한 것으로 감시할 대상을 리터럴 형태로 표기하여 준다. 두번째 인자는 리스너이다. 여기에서는 새로운 값과 오래된 값 두가지의 인자를 받는데 만약 항상 모델의 값을 비교해야할 필요가 있다면 유용하게 써먹을 수 있을것이다.

위의 예제에서는 사용하지 않았지만 세번째 인자는 객체 동등성에 대한 평가로 알고있다. 물론 사용해 보진 않았다... 더 머리가 아플수도 있기에. 값은 boolean 타입.

$watch와 $apply의 차이만 알아도 AngularJS는 조금 더 친숙하게 러닝커브가 히말라야에서 백두산 정도로 우리에게 가까워질(응??!!) 수 있을 것이다.