문제 인식

Daum api 를 사용하여 주소검색 엔진을 사용했었고, 검색된 결과를 list로 뿌려주는 작업을 했었다. 검색된 결과를 list로 보여주는 작업에 ngFor를 사용했는데, 검색된 결과가 바로 보여지지 않고 다른 작업을 하면 뒤늦게 반영되는 현상을 볼 수 있었다.

원인

ngFor에 연동되는 Array 가 변동되었는데 angular가 인식하지 못했다.

해결

Daum api의 키워드 검색을 사용하면 검색된 결과를 callback 안에서 사용하는데 angular에서 변화를 인식하지 못했기 때문에 바로 ngFor에 반영이 되지 않음

1
2
3
4
5
6
7
8
9
10
11
12
searchAddress(keyword) {
		this.placeResults = [];
		let obj = this;
    if(keyword != "") {
			this.placesService.keywordSearch(keyword, function(status, result) {
        if (status === daum.maps.services.Status.OK) {
					// 데이터를 placeResults에 넣었지만 화면에는 반영이 안되었다.
					obj.placeResults = result.places;
        }
			});
		}
	}

이러한 변화감지를 강제적으로 걸어주기 위해 angular에서는 NgZone을 제공하고 있다. NgZone은 @angular/core 에 있다.

1
2
// NgZone을 import 하자
import {Component, ..... , NgZone} from '@angular/core';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// NgZone을 import 하자
import {Component, ..... , NgZone} from '@angular/core';

@Component({
  selector: 'YourSelector',
  template: 'YourTemplete'
})
export class YourComponent {

	constructor(public zone:NgZone, //NgZone을 선언해주자
							...................) {
  }

	// do something
	.............. 

  searchAddress(keyword) {
		this.placeResults = [];
		let obj = this;
    if(keyword != "") {
			this.placesService.keywordSearch(keyword, function(status, result) {
        if (status === daum.maps.services.Status.OK) {
					// 요렇게 NgZone을 쓰면된다
					obj.zone.run(()=>{
						obj.placeResults = result.places;
					})
        }
			});
		}
	}
}

정리

angular에서는 몇몇 상황에서 detection이 벗어나는 상황에 사용하기 위해 NgZone을 제공하고 있으며, 감지범위를 벗어나는 경우에 사용할 수 있다.