Angular 더 빠르게 - On Push 두 번째 이야기

안녕하세요.

 

지난 글에선 On Push 관련해가지고 얘기를 했더랬죠.

 

https://ggodong.tistory.com/326

Angular 더 빠르게 - On Push CD / Immutability

이왕 Change Detection 뿌리 뽑죠. 

 

https://hackernoon.com/angular-2-4-visualizing-change-detection-default-vs-onpush-3d7ed1f69f8e

Angular 2, 4 — Visualizing Change Detection (Default vs OnPush) | HackerNoon

오늘은 글을 여기서 들고 와봤습니다.

 

여기는 글이 되게 시각적으로 보여줘서 재밌더라고요. 영어지만, 오히려 좋아

 

번역 글 쓴다하고 블로그에 적을게 늘거든요.

---

Angular 프레임워크의 Change Detection은 단방향에 탑다운 방식입니다.

 

DOM event, timer callback, XHR handler가 비동기적으로 발생한다 했을 때, 애플리케이션 코드는 보편적으로 callback 함수 안에서 상태를 변경합니다.

 

Angular는 zone.js의 도움을 받아서 비동기적 이벤트를 감지하고, 자동으로 Change Detection을 발생시킵니다.

 

Root Component에서 시작해서 UI 트리를 통과하는 상태 변경을 체크하고, update state를 반영하기 위해서 필요한 DOM을 업데이트합니다.

 

State는 template에 바인드 된 데이터 구조(배열, set, maps, objects, primitives)가 될 수 있습니다.

 

Angular는 두 개의 타입의 Change Detection 전략을 사용합니다.

 

• Default
• OnPush

---

기본 CD 모드에서 앵귤러는 UI에 있는 모든 컴포넌트의 변화를 체크합니다.

 

이러한 체크는 AngularJS의 체크보다 굉장히 빠릅니다. 그 이유는 Angular의 방법은 VM 친화적으로 CD 클래스를 생성하기 때문입니다. (AOT 컴파일이 되어서 코드가 사전 컴파일이 되어 있는 경우)

 

예를들어봅시다.

 

여러 칸을 가진 그리드가 있다고 합시다. (모두 앵귤러의 컴포넌트입니다)

 

그리고 하나의 칸을 선택하게 되면, 애플리케이션의 칸의 상태는 변경됩니다.

 

그리고 클릭 시 Angular Change Detection이 발생하게 되는데, 아마 아래의 짤을 보면 더 이해가 잘 되실겁니다.

하나를 바꾸면 모든 곳에서 이를 감지한다

기본 CD를 하게되면, 코드의 복잡성을 줄어들지만, 많은 이벤트가 SPA 안에 존재한다면 병목현상이 발생하게됩니다.

---

OnPush CD 전략을 사용하게 되면 Angular는 컴포넌트에서의 CD를 스킵합니다. input으로 받는 참조값이 바뀌지 않는다면요. (불변성, immutable)

 

상태를 업데이트하기 위해서, 애플리케이션은 새로운 참조값을 반환해야합니다.

 

이러한 옵션은 앵귤러가 UI의 하위 트리들이 많은 경우에 CD 로직을 스킵하는데 효율적으로 만들어줍니다.

 

이러한 전략은 React가 shouldComponentUpdate()를 사용해서 필요없는 렌더 사이클을 없애는 방법과 동일합니다.

 

OnPush 전략을 이용한 예시를 들어봅시다.

 

this.currentState.cells = [
	...this.currentState.cells.slice(0, index),
    updateCell,
    ...this.currentState.celles.slice(index + 1)
]; // 이러면 새로운 참조값을 보겠죠.

이렇게 하게되면, 정확하게 원하는 칸만 CD를 발생합니다. 다른 애들은 완전히 배제를 하죠.

 

깔끔

이러한 접근법은 확실히 더 효율적인 퍼포먼스를 만들어 냅니다.

 

하지만, 불변 상태 objects를 사용하는 거에서 복잡성을 일으킬 수도 있으니, 적절히 잘 선택해야겠죠.

---

이상 Angular 더 빠르게 - On Push 두 번째 이야기였습니다. ^_^