서비스 상태에 따른 Angular 업데이트 directive_AngularJS

Angular JS(Angular.JS)는 웹 페이지를 개발하는 데 사용되는 프레임워크, 템플릿, 데이터 바인딩 및 풍부한 UI 구성 요소 집합입니다. 전체 개발 프로세스를 지원하고 수동 DOM 조작 없이 웹 애플리케이션의 아키텍처를 제공합니다.

AngularJS는 애플리케이션 구축 시 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 표시를 위해 설계된 훌륭한 선언적 언어이지만 웹 애플리케이션을 구축하는 데에는 취약합니다. AngularJS가 여기에 등장하여 HTML의 자연스러운 단점을 보완하고 웹 애플리케이션을 구축하는 데 사용됩니다.

TL;DR

이 문서에서는 서비스 상태에 따라 지침을 업데이트하는 세 가지 방법을 설명합니다. 이는 $watch 표현식, 이벤트 전달 및 컨트롤러 계산 속성입니다.

질문

일부 상태 정보(예: 연결 상태 및 배터리)가 포함된 readerService가 있습니다. 이제 이러한 상태를 표시하는 지시문을 작성해야 합니다. readerService에서 데이터만 가져오면 되고 외부 값은 필요하지 않기 때문에 서비스를 직접 주입합니다. 하지만 업데이트 방법이 문제가 됩니다.

서비스 코드는 다음과 같습니다.

const STATUS = {
DETACH: 'DETACH',
ATTACH: 'ATTACH',
READY: 'READY'
}
class ReaderService {
constructor() {
this.STATUS = STATUS
// The status will be changed by some callbacks
this.status = STATUS.DETACH
}
}
angular.module('app').service('readerService', readerService)

지시 코드는 다음과 같습니다.

angular.module('app').directive('readerIndicator', (readerService) => {
const STATUS = readerService.STATUS
const STATUS_DISPLAY = {
[STATUS.DETACH]: 'Disconnected',
[STATUS.ATTACH]: 'Connecting...',
[STATUS.READY]: 'Connected',
}
return {
restrict: 'E',
scope: {},
template: `
<div class="status">
{{statusDisplay}}
</div>
`,
link(scope) {
// Set and change scope.statusDisplay here
}
}
})

아래에 하나씩 소개되는 방법들을 시도해보았습니다.

방법 1: $watch

가장 먼저 떠오르는 방법은 지시문에 $watch를 사용하여 readerService.status를 모니터링하는 것입니다. 이는 지시문 범위의 속성이 아니므로 이를 함수로 래핑해야 합니다. Angular는 더티 검사 중에 이전 값과 새 값을 계산하고 비교하며 상태가 실제로 변경되는 경우에만 콜백이 트리거됩니다.

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

이 방법은 readerService.status의 변경 사항과 관련된 코드가 더티 검사를 트리거하는 한 충분히 간단하고 효율적입니다. 서비스에는 코드 수정이 필요하지 않습니다.

그러나 서비스 상태에 영향을 받는 지시문 속성이 여러 개 있는 경우 $watch 코드는 더 모호해집니다. 특히 $watch에 의해 수정된 값이 다른 값에 영향을 미칠 경우. 예:

// In directive
link(scope) {
scope.$watch(() => readerService.status, (status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
scope.showBattery = status !== STATUS.DETACH
})
scope.$watch('showBattery', () => {
// some other things depend on showBattery
})
}

이때에는 Ember나 Vue의 계산 속성과 같은 선언적 프로그래밍 스타일이 더 이해하기 쉬울 것입니다. 이에 대해서는 나중에 논의하겠습니다.

방법 2: $broadcast/$emit + $on

상태가 변경될 때마다 서비스가 이벤트를 보내고 지시문이 이벤트를 수신하여 상태를 변경한다는 개념입니다. 지시문이 렌더링될 때 상태가 업데이트되었을 수 있기 때문입니다. 따라서 링크의 초기값을 계산해야 합니다.

처음엔 $broadcast로 했어요. 코드는 다음과 같습니다.

// In service
setStatus(value) {
this.status = value
// Need to inject $rootScope
this.$rootScope.$broadcast('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
scope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

하지만 $broadcast 이후의 UI 업데이트는 항상 1초 이상 걸린다는 사실을 즉시 발견했습니다(그러나 $on 콜백은 매우 빠릅니다). Google에서 조사한 결과 $broadcast가 모든 하위 수준 범위에 브로드캐스트하고 브로드캐스트가 완료된 후 더티 검사가 수행되기 때문에 그 이유를 알아냈습니다. 더 나은 접근 방식은 이벤트를 위로만 전달하는 $emit를 사용하는 것이지만, 이벤트를 보내거나 이벤트를 수신하려면 $rootScope를 사용해야 합니다.

수정된 코드는 다음과 같습니다.

// In service
setStatus(value) {
this.status = value
// Use $emit instead of $broadcast
this.$rootScope.$emit('reader.statusChanged', this.status)
}
// In directive
link(scope) {
scope.statusDisplay = STATUS_DISPLAY[nfcReaderService.status]
// Use $rootScope instead of scope
$rootScope.$on('reader.statusChanged', (event, status) => {
scope.statusDisplay = STATUS_DISPLAY[status]
})
}

어떤 이유로 $broadcast를 사용해야 하는 경우 $on 콜백 끝에 $digest 또는 $apply를 사용하여 더티 검사를 강제로 실행할 수 있으며, 이는 UI를 빠르게 업데이트하려는 목적도 달성할 수 있습니다.

방법 3: 컨트롤러 + 속성

개인적으로 처음 두 가지 방법으로 문제를 해결할 수 있다고 생각하지만 코드 유지 관리성은 그다지 좋지 않습니다. $watch는 속성이 서로 관련되어 있을 때 이해하기 매우 어렵습니다. $emit/$on은 일부 로직을 두 번 작성해야 합니다(지시문을 초기화할 때와 콜백이 실행될 때). 방법 1에서는 선언적 속성이 $watch보다 이해하기 쉽다는 점을 언급했습니다. 이 방법은 컨트롤러를 사용하는 것입니다. 지시문은 자체 컨트롤러를 데이터 소스(또는 뷰 모델)로 설정할 수 있으며 계산해야 하는 속성을 컨트롤러의 속성으로 사용할 수 있습니다. 이렇게 하면 더티 검사 중에 자동으로 계산됩니다.

// In directive
class ReaderController {
constructor($scope, readerService) {
this.readerService = readerService
}
get statusDisplay() {
return STATUS_DISPLAY[this.readerService.status]
}
}
return {
// ...
controller: ReaderController,
controllerAs: 'vm',
template: `
<div class="status">
{{vm.statusDisplay}}
</div>
}

이런 방식으로 대부분의 로직을 컨트롤러로 이동할 수 있습니다. DOM 작업이 없으면 링크 메서드를 작성할 필요조차 없습니다. $watch 및 $on 을 추가할 필요가 없습니다. 더티 검사의 특성 때문에 템플릿에 바인딩된 속성은 종종 여러 번 더 계산됩니다. 따라서 속성은 매우 간단해야 합니다. 대부분의 경우 이는 문제가 되지 않습니다.

위 내용은 편집자가 소개한 서비스 현황을 바탕으로 한 Angular 업데이트 지시문입니다. 모든 분들께 도움이 되었으면 좋겠습니다!