Angular 신호 이해: 포괄적인 가이드

끊임없이 진화하는 웹 개발의 세계에서 Angular는 Angular 프로그래머의 능력을 끊임없이 향상시켜 계속해서 길을 개척하고 있습니다. 개선에 대한 확고한 약속으로 유명한 이 게임은 다시 한 번 가능성의 경계를 넓히고 이번에는 Angular v16 릴리스와 함께 흥미로운 새 기능인 Angular Signals를 도입했습니다.

Signal을 처음 사용하거나 이미 개발자 프리뷰를 사용해 보았지만 Signal의 작동 방식에 대해 자세히 알고 싶다면 이 포괄적인 가이드가 Signal을 이해하는 데 도움이 될 것입니다.

Angular 신호는 무엇이며 지금 바로 사용하는 방법을 배우는 것이 왜 중요한가요?

본질적으로 Angular Signals는 인수가 없는 함수 [(() => T)]로 작동하고 실행 시 특정 값을 반환하는 반응형 모델입니다. 어떻게 그렇게 할 수 있을까요? 여기서 한 가지 중요한 것이 있는데, 바로 getter 함수입니다. getter 함수의 호출은 현재 값을 반환하고 Angular는 종속성이 변경될 때 이러한 반응 값을 자동으로 인식하고 업데이트합니다.

다음은 이 프로세스를 시각화하는 데 도움이 되는 다이어그램입니다.

이제 모델을 업데이트하면 Angular 변경 사항이 해당 뷰에 자동으로 적용됩니다. 이를 통해 원활하고 동기화된 모델-뷰 상호 작용이 가능하여 궁극적으로 UX가 더 부드러워집니다.

Angular Signals는 Observer Design Pattern이라는 패턴을 기반으로 하기 때문에 값을 저장하는 게시자와 이에 관심이 있는 구독자 목록이 있습니다. 값이 변경되면 알림을 받습니다. 즉, 한 가지만 변경되었으므로 업데이트해야 함을 나타냅니다. 이렇게 하면 전체 구성 요소 트리에서 변경 사항을 확인할 Angular 필요가 없습니다. 여기에는 지나치게 복잡한 작업이 없습니다.

이 기능의 주요 장점 중 하나는 상태 값 업데이트를 단순화하고 렌더링 성능을 최적화할 수 있다는 것입니다. 이를 사용하여 개발자는 상태 변경을 세밀하게 제어하면서 다음과 같은 이점을 얻을 수 있습니다.

• 자동 종속성 추적: Angular는 반응 값을 자동으로 인식하고 업데이트합니다.
• 더 간단하게 처리할 수 있는 상태 업데이트: 최소한의 복잡성으로 상태 변경을 세밀하게 제어할 수 있습니다.
• 최적화된 성능: 전체 구성 요소 트리에서 변경 사항을 확인할 필요가 없어 성능이 향상됩니다.
• 느리게 평가되는 계산된 값입니다.
• Granular state tracking.
• 구성 요소 외부에서 신호를 구현할 수 있는 가능성(Dependency Injection에서 잘 작동함).
• Improved Angular Change Detection.
• 앱 성능 및 유지 관리 용이성이 향상됩니다.

Angular Signals vs RxJS

이 모든 것을 통해 많은 사람들이 Angular Signals가 RxJS만큼 강력하지만 구문이 더 간단하다고 생각합니다. 이것은 RxJS에 무엇을 의미합니까? 운명이 정해진가? 제 생각에는 그렇지 않습니다. 이 새로운 기능은 수동 구독 관리 및 메모리 누수 위험과 같은 RxJS의 복잡성 중 일부를 숨길 수 있지만 곧 RxJS를 대체하지는 않을 것입니다.

이 새로운 기능의 중요성을 강조하고 정의했습니다. 계속해서 Angular에서 신호를 생성하고 사용하는 방법을 설명하겠습니다.

실습: Angular 신호 시작하기

세 가지 기본 요소를 살펴보고 작동 방식과 각 기본 요소를 언제 사용하는지 보여 드리겠습니다.

필수 구성 요소:

• Angular 대한 이전 경험 .
• 프레임워크의 반응 원리에 대한 기본 지식.
• Angular 16 version installed or running.

먼저 이 새로운 기능은 쓰기 가능한 신호, 계산된 신호 및 효과의 세 가지 반응 기본 요소를 제공하여 Angular 앱에서 반응성을 달성할 수 있도록 합니다.

1. 쓰기 가능한 신호 사용

이러한 신호는 직접 업데이트할 수 있는 신호이지만, 이를 사용하려면 먼저 정의해야 합니다. 다음은 기술 데모입니다.

Import { signal } from ‘@angular/core’;
const count = signal(0);
Count.set(count() +1);

2. 계산된 신호 사용

Computed Signals를 사용하면 파생된 값을 처리하기 위한 선언적 방법을 얻을 수 있습니다. 함수가 의존하는 신호에 변화가 있을 때, 계산된 신호는 다시 계산되어 읽기 전용으로 파생된 신호를 생성합니다. 다음은 기술 데모입니다.

import { computed, signal } from '@angular/core';
const count = signal(0);
const doubled = computed(() => count()

3. 효과 사용

Angular 시그널의 효과는 시그널의 변화에 따라 기능을 실행합니다. effect() 내에서 상태를 명령적으로 수정하고, DOM을 수동으로 변경하고, 비동기 코드를 실행할 수 있습니다. 다음은 기술 데모입니다.

import { effect, signal } from '@angular/core';
const count = signal(0);
effect(() => {
  console.log('Count changed to:', count());
});
count.set(1);

Angular Signals Examples

다음은 Angular Signals의 작동 방식을 확인할 수 있는 실용적인 예입니다. 세 가지 기본 형식을 모두 사용하여 간단한 카운터 응용 프로그램을 만들어 보겠습니다.

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <p>Count: {{ count() }}</p>
      <p>Doubled: {{ doubled() }}</p>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);
 
  constructor() {
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }
 
  increment() {
    this.count.set(this.count() + 1);
  }
}

Angular 신호와 Ignite UI: 소매 아래에는 무엇이 있습니까?

Angular Signals를 Ignite UI for Angular와 결합하면 웹 애플리케이션을 다음 단계로 끌어올릴 수 있습니다. 이 강력한 콤보가 어떻게 작동하는지 간략하게 살펴보겠습니다. Angular Signals는 변경 사항을 정확하게 추적하여 상태 관리를 간소화하는 반면, Ignite UI는 강력한 고성능 UI 구성 요소를 제공합니다. 이 두 가지를 함께 사용하면 앱을 더 빠르고 응답성이 향상됩니다.

이제 Angular Signals와 Ignite UI 사용하여 실시간 데이터 그리드를 구축해 보겠습니다.

1. 신호 설정 – 데이터 및 필터에 대한 신호 정의

import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store our data
  filter = signal('');  // Signal for filtering the data
 
  // Computed signal to apply the filter to the data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
  // Method to fetch and update data
  fetchData(newData) {
    this.data.set(newData);
  }
}

2. 데이터 업데이트: 새 데이터를 가져오고 신호를 업데이트합니다.

fetchData(newData) {
  this.data.set(newData);
}

 

3. 원활한 업데이트 경험

그리드는 Angular Signals의 무효 성능과 Ignite UI의 효율적인 렌더링 덕분에 데이터가 변경됨에 따라 실시간으로 업데이트됩니다. 그러나 여기에 Angular 신호가 없는 또 다른 예가 있습니다.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [(ngModel)]="filter" (ngModelChange)="applyFilter()" placeholder="Filter" />
    <igx-grid [data]="filteredData">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = [];  // Data array
  filteredData = [];  // Filtered data array
  filter = '';  // Filter string
 
  applyFilter() {
    this.filteredData = this.data.filter(item => item.name.includes(this.filter));
  }
 
  fetchData(newData) {
    this.data = newData;
    this.applyFilter();
  }
}
With:
import { Component } from '@angular/core';
import { signal, computed, effect } from '@angular/core';
 
@Component({
  selector: 'app-data-grid',
  template: `
    <input [value]="filter()" (input)="filter.set($event.target.value)" placeholder="Filter" />
    <igx-grid [data]="filteredData()">
      <!-- Define your grid columns here -->
    </igx-grid>
  `
})
export class DataGridComponent {
  data = signal([]);  // Signal to store data
  filter = signal('');  // Signal for filter
 
  // Computed signal to filter data
  filteredData = computed(() =>
    this.data().filter(item => item.name.includes(this.filter()))
  );
 
  constructor() {
    // Effect to log changes for debugging
    effect(() => {
      console.log('Data or filter changed:', this.filteredData());
    });
  }
 
   fetchData(newData) {
    this.data.set(newData);
  }
}

결론적으로...

다음은 Angular Signals를 사용하려는 이유에 대한 간단한 설명입니다. Angular Signals가 없으면 상태와 그 효과를 수동으로 업데이트하고 관리합니다. 여기에는 상태를 업데이트하고 변경을 트리거하는 함수를 작성하는 작업이 포함되는 경우가 많아 코드가 더 복잡하고 오류가 발생하기 쉽습니다. Angular Signals를 사용하면 상태 관리가 더 선언적이고 효율적이며 오류 가능성이 적어 성능과 유지 관리성이 모두 향상됩니다.