각도 변경 감지 전략: OnPush 및 기본 전략

변경 감지는 현재 상태를 새 상태로 확인하는 메커니즘이라고 합니다. 두 상태 간의 차이는 업데이트해야 하는 변경 사항이 있음을 나타냅니다. 이는 데이터의 변경 사항으로 보기를 업데이트해야 함을 의미합니다.

앱이 변경되는 동안 구성 요소에서 발생하는 모든 변경 사항은 Angular 2+를 통해 감지됩니다. 모델이 변경될 때마다 관련 변경 사항이 각도로 감지되고 뷰가 즉시 업데이트됩니다. 이 변화를 각도 변화 감지라고 합니다.

변경은 네트워크 요청에서 수신된 데이터의 결과이거나 사용자 이벤트를 통해 발생할 수 있습니다. 앱의 크기가 커짐에 따라 변경 감지 방식으로 더 많은 작업을 수행해야 합니다. 기본 뷰와 해당 모델 간의 동기화를 유지하려면 각도 감지가 필요합니다.

각도 모델의 변경은 다음 중 하나로 인한 것일 수 있습니다.

• DOM 이벤트(클릭, 마우스 오버 등)
• AJAX 요청
• 타이머(setTimer(), setInterval())

전제 조건

이 기사를 이해하려면 각도 구성 요소의 개념에 익숙해야 할 수 있습니다. 또한 값 유형 및 참조 유형의 개념은 기사를 이해하는 데 도움이 될 수 있습니다.

Angular의 변화 감지

각도 의 변경 감지는 두 단계로 수행되며 첫 번째 단계는 개발자를 통한 애플리케이션 모델 업데이트입니다. 이벤트를 내보내거나 구성 요소의 속성 변경을 통해 선행될 수 있습니다. 두 번째 단계는 모델을 반영하는 각도의 작업입니다. 새 데이터가 구성 요소에 명시적으로 푸시되는지 여부를 감지합니다. 이것은 async 파이프를 사용하여 구독된 구성 요소 또는 Observable을 통해 수행할 수 있습니다.

따라서 두 단계는 다음과 같습니다.

• 애플리케이션 모델 업데이트(개발자)
• 뷰에서 모델의 상태를 반영합니다(Angular).

Angular의 변경 감지는 마우스 클릭, HTTP 요청 및 기타 유형의 이벤트와 같은 일반적인 브라우저 이벤트의 변경을 감지합니다. 변경 사항이 감지되면 보기 업데이트가 필요한지 여부가 결정됩니다.

변화 감지 전략

기본 전략과 onPush인 두 가지 각도 변경 감지 전략이 있습니다.

기본 전략

• 모델의 모든 변경 사항이 캡처되었는지 확인하기 위해 모델의 변경 사항을 각도로 모니터링합니다. 새 상태와 이전 상태의 차이는 각도로 확인됩니다.
• 뷰를 업데이트하려면 각도에 ​​새 값에 대한 액세스 권한이 있어야 하며 이 값은 이전 값과 비교됩니다. 이를 기반으로 보기를 업데이트할지 여부를 결정합니다.
• 따라서 기본 전략에서 각도는 값에 변경 사항이 있는지 여부에 대한 질문을 중심으로 회전합니다.
• 구성 요소가 의존하는 위치에 대한 가정은 없습니다. 관련된 변경 사항이 있을 때마다 확인하는 보수적인 전략입니다. 모든 브라우저 이벤트, 시간, 약속 및 XHR에 대해 검사가 수행됩니다.
• 이 전략은 많은 구성 요소와 함께 큰 응용 프로그램을 고려해야 하는 경우 문제가 될 수 있습니다.
• 기본적으로 ChangeDetectionStrategy.Default 전략을 사용합니다.

브라우저의 기본 메커니즘 재정의

• 여러 하위 수준 API는 시작 시 각도로 패치됩니다. 이러한 API는 addEventListener일 수 있습니다. 브라우징 이벤트를 등록하는 데 사용되는 브라우저 기능입니다 .
• addEventListener 는 이전 버전처럼 작동하는 최신 버전으로 angular로 대체됩니다.
• addEventListener 새 버전 에 의해 이벤트 핸들러에 더 많은 기능이 추가되었습니다 . Angular로 성능 체크를 실행한 후 UI가 업데이트 됩니다.

일하고있는

Zone.js와 함께 제공되는 라이브러리는 브라우저 API의 하위 수준 패치를 수행합니다.

• 영역은 여러 JVM 실행 턴에서 실행 내용으로 정의됩니다. 이 메커니즘을 통해 브라우저에 추가 기능을 추가할 수 있습니다. 영역은 변경 사항을 감지하고 감지를 트리거하기 위해 내부적으로 각도에 의해 사용됩니다.
• 영역에는 일반적으로 세 단계가 있습니다. 즉, 시작 시 안정적이고 영역에서 작업이 실행되면 불안정해지고 작업이 완료되면 안정화됩니다.
• 변경 감지를 지원하기 위해 패치된 브라우저 메커니즘은 다음과 같습니다.

1. 클릭 등과 같은 브라우저 이벤트
2. setInterval() 및 setTimeout()
3. Ajax HTTP 요청

• 각도에서 변경 감지를 트리거하기 위해 Zone.js는 Websockets와 같은 다른 브라우저의 여러 API를 패치하는 데 사용됩니다.
• 이 방법의 제한 사항은 Zone.js가 브라우저 API를 지원하지 않는 경우 변경 감지 중에 트리거가 발생하지 않는다는 것입니다.

변경 감지가 트리거될 때 각도 변경 감지 는 어떻게 작동합니까?

트리거된 변경 사항은 변경 감지기를 통해 감지됩니다. 이 변경 감지기는 애플리케이션 시작 시 생성됩니다. TodoItem 구성 요소 의 예를 고려할 수 있습니다. 할 일의 상태가 토글된 경우 구성 요소에서 개체 할 일을 수신하면 이벤트가 발생합니다. Angular 프로젝트를 실행하는 방법에 대해 자세히 알아보세요.

기본 변경 감지 메커니즘 작동

변경 감지 메커니즘은 간단합니다. 각 식에서 속성의 현재 값은 식의 이전 상태에 있는 해당 속성 값과 비교됩니다.

• 속성 값에 차이가 있으면 isChanged 값이 true로 설정 됩니다.

2. 온푸시 전략

• onPush 전략을 사용할 때 각도는 언제 검사를 수행해야 하는지 추측할 필요가 없습니다.
• 입력 참조의 변경 또는 구성 요소 자체에 의해 트리거된 이벤트를 기반으로 각도가 변경 확인을 수행합니다.
• 또한 각도에 변경 사항을 확인하도록 명시적으로 요청할 수 있습니다. 이는 componentRef.markForCheck() 메서드를 통해 수행됩니다.
• 이 전략의 구성 요소는 입력에만 의존합니다. 변경 감지 전략은 다음과 같은 경우에만 수행됩니다.

• 입력 기준이 변경되었습니다.
• 모델의 구성 요소 또는 해당 하위 항목에 관련된 변경 사항이 있습니다.
• 명시적 변경 감지를 수행해야 하는 경우.
• 보기의 비동기 파이프가 사용되는 경우.

• 기본 전략과 비교하여 온푸시 전략은 주로 다음 두 가지 질문을 중심으로 진행됩니다.

• 참조 유형에 변경 사항이 있습니까?
• 참조 유형의 참조에 변경 사항이 있으면 힙 메모리 값에도 변경 사항이 있습니까?

• 구성 요소와 하위 구성 요소에 대한 불필요한 검사를 방지합니다.

구성 요소에 대한 onPush 전략 구현

새 참조가 @Input() 값으로 전달된 경우에만 변경 감지를 트리거합니다. 값은 숫자, 부울, 문자열 및 null과 같은 기본 유형일 수 있습니다. 배열과 객체도 사용할 수 있습니다. 수정된 개체 또는 배열은 새 참조가 생성되지 않으므로 onPush 구성 요소에서 변경 감지를 트리거하는 데 사용할 수 없습니다. 따라서 새 개체 또는 배열 참조가 전달되어 감지기가 변경을 감지하도록 트리거해야 합니다.

변경 감지 방법의 버그를 피하기 위해 변경 불가능한 개체 및 목록을 사용하여 어디서나 onPush 변경 감지를 사용하여 애플리케이션을 빌드할 수 있습니다. 불변 객체의 수정은 새 객체 참조를 생성하여 수행할 수 있으므로 다음과 같습니다.

• 모든 변경에 대해 onPush 변경 감지가 트리거됩니다.
• 버그의 원인을 방지하는 새 개체 참조가 항상 생성됩니다.

이러한 경우 Immutable.js는 개체(Map) 및 목록(List)에 대한 변경 불가능한 데이터 구조를 포함하므로 사용할 수 있습니다.

• 구성 요소 주석에 changeDetection 매개 변수를 추가하면 onPush 전략이 구현됩니다. 매번 새로운 참조를 전달하는 대신 ChangeDetectorRef 를 사용하여 완전한 제어를 할 수도 있습니다.

ChangeDetectorRef.detectChanges()

• 변경 감지 방법 은 changeDetectorRef에서 분리 및 재결합 방법으로 수동으로 부착하거나 분리할 수 있습니다 .

ChangeDetectorRef.detach() 및 불변.js

변경 감지 를 위해 onPush 전략을 사용할 때 불변성을 적용하는 것이 항상 좋은 생각입니다. 이러한 경우 Immutable.js가 사용됩니다.

immutable.js는 List, Stack, Map과 같은 불변 데이터 구조와 함께 JavaScript의 불변성을 통합하기 위해 만들어진 라이브러리입니다.

프로젝트에 Immutable.js를 추가하려면 터미널에서 다음 명령어를 사용해야 합니다. 각도 프로젝트에 대해 자세히 알아보십시오.

$ npm 설치 불변 – 저장

Immutable.js에서 데이터 구조를 가져오려면 다음 명령을 사용해야 합니다. 이 경우 명령은 목록 및 맵 데이터 구조만 가져오는 것을 보여줍니다.

'불변'에서 {지도, 목록} 가져오기 배열을 사용할 수도 있습니다.

또한 Immutable.js를 사용하는 경우 몇 가지 단점이 있습니다.

• API를 사용하는 것은 약간 번거롭습니다.
• Imutable.js 라이브러리는 인터페이스를 지원하지 않으므로 인터페이스를 데이터 모델에 구현할 수 없습니다.

세계 최고의 대학에서 온라인으로 소프트웨어 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

요약

이 기사에서는 변경 감지 메커니즘과 전략을 소개했습니다. Angular는 기본적으로 모든 구성 요소에 대해 변경 감지를 수행합니다. 또한 ChangeDetectorRef는 데이터가 변경될 때 새 참조의 변경 사항을 감지하기 위해 적용될 수 있습니다. 앵귤러 개발에 대한 수요가 계속 증가하여 인도에서 앵귤러 개발자 급여가 발생합니다.

소프트웨어 기술, 개발 및 그 이면의 메커니즘에 대해 자세히 알아보려면 upGrad에서 제공하는 소프트웨어 개발 - 전체 스택 개발 전문화 과정의 Executive PG 프로그램을 확인하십시오. 전문화 과정은 23주 온라인 프로그램으로 300개 이상의 사례 연구를 통해 지식을 향상하고 사용 가능한 도구와 프로그래밍 언어를 통해 실용적인 기술을 향상할 수 있습니다. 코스와 관련하여 더 궁금한 사항이 있으면 메시지를 남겨주세요. 저희 팀에서 연락드리겠습니다.