[AngularJS] $watch 사용법

[AngularJS] $watch 란?

 

 

 

 

 

 

 

 

 

$watch 는 data 의 변화를 캐치하여, 미리 지정해놓은 동작을 수행할 수 있다.

주로 timeout / UI 입력값 변화 / API response(Ajax call) 등으로 인하여, Application 이 비동기 식으로 동작할 때 사용한다. 

 

 

 

 

 

 

 

[예시]

 

$scope.$watch('string', function(newValue, oldValue) {
        
        //string의 상태가 변하는 순간 실행할 구문
        console.log("'string' 의 상태가 변했습니다!");
}, false);

 

 

 

 

 

$watch 를 사용할 때, 3가지 parameter 를 던질 수 있는데, 아래와 같다.

(사실 4가지인데, 마지막 parameter는 생략)

 

 

 

 

 

 

 

 

 

1) watchExp ('string' 에 해당) :

 

상태 변화를 감지하는 대상으로써, $watch 당할(?) 타겟이다.

string 뿐만 아니라, function, array, object 도 가능하며,

이 값의 변화를 감지하면 아래의 listener, 즉 function 이 동작하게 된다.

 

 

 

 

 

 

 

2) listener (function 에 해당) :

 

$watch 할 타겟으로 선정한 요소의 값이 변경되면, trigger 되는 함수

파라미터인 (newValue, oldValue) 는 그냥 봐도 무엇일지 느낌이 온다.

 

위에서는 console.log("'string' 의 상태가 변했습니다!"); 가 실행될 것이다.

 

 

 

 

 

 

 

3) objectEquality (true or false) :

 

명시하지 않을 시, default 상태는 false 다.

 

false 일 때 : shallow comparison

true 일 때 : deep comparison

 

 

$watch 할 타겟이 원시변수라면 아무 상관없지만,

$watch 할 타겟이 참조변수라면 이 3번째 인자는 중요해진다.

[원시변수(string, number) vs 참조변수(array, object)]

 

 

 

 

 

 

 

 

예를 들어 아래 배열구조를 $watch 한다고 가정하면,

$scope.newArr = [1, 2, 3];

 

 

false 일 때는

$scope.newArr 에 아예 새로운 값이 할당되지 않는 한,

배열 내의 값(1, 2, 3)이 아무리 변해도 $watch 는 캐치하지 않는다.

 

 

배열 내 요소의 값 변화까지 캐치하고 싶을 때!

그 때 바로 true 를 주면 된다!

 

 

 

 

 

 

 

 

 

 

 

 

이벤트를 발생시키고, 그 이벤트를 캐치하고 싶다면?

https://devinserengeti.tistory.com/9?category=901018

[AngularJS] $broadcast & $on 사용법 / $broadcast 와 $emit 의 차이점

 

 

원시변수와 참조변수의 차이가 궁금하다면?

https://devinserengeti.tistory.com/15?category=901017

[자바스크립트] 기본형과 참조형의 차이 / 깊은복사 & 얕은복사