NgRx&#s signalMethod를 사용하여 Angular의 부작용 개선-JS 튜토리얼-php.cn

NgRx&#s signalMethod를 사용하여 Angular의 부작용 개선

Susan Sarandon

풀어 주다： 2025-01-03 01:57:38

원래의

365명이 탐색했습니다.

Enhancing Side Effects in Angular with NgRx

NgRx는 항상 Angular 애플리케이션의 상태 관리를 위해 신뢰할 수 있는 라이브러리였습니다. Signals API의 도입으로 개발자는 이제 상태 변경 및 부작용을 처리하는 보다 효율적인 방법을 갖게 되었습니다. 이러한 부작용을 처리하기 위해 NgRx 팀은 최근 반응 워크플로를 단순화하고 보다 직관적으로 만드는 signalMethod를 도입했습니다.

이 기사에서는 signalMethod에 대해 자세히 알아보고 실용적인 예를 통해 이것이 어떻게 작동하는지, 그리고 이것이 왜 Angular 툴킷에 탁월한 추가 기능인지 보여드리겠습니다.

시그널 메소드란 무엇입니까?

signalMethod는 부작용을 깔끔하고 반응적인 방식으로 관리할 수 있도록 NgRx에서 도입한 유틸리티입니다. RxJS 연산자나 수동 효과 관리에 의존하는 기존 접근 방식과 달리 signalMethod를 사용하면 중요한 것, 즉 변경 사항 처리 논리에 집중할 수 있습니다.

신호를 프로세서 기능과 결합하여 이를 달성합니다. 이 함수는 정적 값이든 반응 신호이든 입력의 변화에 반응합니다. 그 결과 상태 기반 작업을 처리하는 유연하면서도 강력한 방법이 탄생했습니다.

신호 기반 작업 설정

간단한 예부터 시작해 보겠습니다. 숫자가 두 배가 될 때마다 메시지를 기록합니다. signalMethod를 사용하여 이를 달성하는 방법은 다음과 같습니다.

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({
  selector: 'app-math-logger',
  template: `<button (click)="increment()">Increment</button>`
})
export class MathLoggerComponent {
  private counter = signal(1);

  // Define the signal method
  readonly logDoubledValue = signalMethod<number>((value) => {
    const doubled = value * 2;
    console.log(`Doubled Value: ${doubled}`);
  });

  increment() {
    this.counter.set(this.counter() + 1);
    this.logDoubledValue(this.counter);
  }
}

로그인 후 복사

여기서는 increment 메소드가 호출될 때마다 logDoubledValue가 호출됩니다. 카운터의 값은 signalMethod로 전달되어 두 배의 값을 기록합니다. 이 예는 signalMethod가 신호와 얼마나 쉽게 통합되어 상태 변경에 반응하는지 보여줍니다.

신호에 동적으로 반응하기

온도 모니터링 시스템을 작업하고 있다고 가정해 보겠습니다. 두 배의 값을 기록하는 대신 온도가 임계값을 초과하면 사용자에게 경고해야 합니다. signalMethod를 사용하면 다음과 같이 간단해집니다.

@Component({
  selector: 'app-temperature-monitor',
  template: `<button (click)="increaseTemperature()">Increase Temperature</button>`
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // Start at 20°C

  readonly alertHighTemperature = signalMethod<number>((temp) => {
    if (temp > 30) {
      console.warn('Warning: High temperature detected!');
    }
  });

  increaseTemperature() {
    this.temperature.set(this.temperature() + 5);
    this.alertHighTemperature(this.temperature);
  }
}

로그인 후 복사

온도가 올라갈 때마다 AlertHighTemperature 메서드는 새 값을 평가하고 값이 너무 높으면 경고를 표시합니다.

서비스 정리 제어

어떤 경우에는 구성 요소에서 직접 정의하지 않고 서비스에서 signalMethod를 정의할 수도 있습니다. 이를 통해 더 나은 재사용이 가능하지만 메모리 누수를 방지하려면 부작용을 주의 깊게 관리해야 합니다.

예:

import { Injectable } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly logScore = signalMethod<number>((score) => {
    console.log(`Current Score: ${score}`);
  });
}

로그인 후 복사

이제 구성요소가 이 서비스를 사용한다고 가정해 보겠습니다.

@Component({
  selector: 'app-score-tracker',
  template: `<button (click)="updateScore()">Update Score</button>`
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score); // Signal-driven action
  }
}

로그인 후 복사

메모리 누수를 방지하려면 동적 시나리오에서 서비스를 사용할 때 구성 요소의 컨텍스트를 삽입해야 합니다.

import { Injector } from '@angular/core';

@Component({ /* ... */ })
export class ScoreTrackerComponent {
  private injector = inject(Injector);
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score, { injector: this.injector });
  }
}

로그인 후 복사

왜 signalMethod를 선택하나요?

효과 같은 다른 도구에 비해 signalMethod는 몇 가지 뚜렷한 장점을 제공합니다.

유연성: 정적 값과 반응 신호를 모두 처리할 수 있어 혼합 시나리오에 이상적입니다.
명시적 종속성 추적: 제공된 신호만 추적하여 의도하지 않은 종속성의 위험을 줄입니다.
간소화된 컨텍스트 관리: Angular 주입 컨텍스트에서 원활하게 작동하고 필요할 때 수동 제어가 가능합니다.

signalMethod 사용 시기에 대한 참고 사항

signalMethod는 반응형 워크플로에서 간단한 부작용을 처리하는 데 적합하지만 RxJS가 더 적합할 수 있는 시나리오도 있습니다. 특히 복잡한 스트림이나 경합 조건과 관련된 경우에는 더욱 그렇습니다. 그러나 NgRx 신호를 활용하는 애플리케이션의 경우 signalMethod는 단순성과 성능의 완벽한 균형을 유지합니다.