Angular의 새로운 기능: 신호-JS 튜토리얼-php.cn

Angular의 새로운 기능: 신호

Mary-Kate Olsen

풀어 주다： 2024-12-05 01:22:11

원래의

440명이 탐색했습니다.

Angular

안녕하세요, Angular 매니아 여러분! 오늘은 Angular의 가장 멋진 최신 기능 중 하나인 Signals를 여러분과 공유하게 되어 기쁩니다. 저처럼 항상 코드를 더 효율적이고 관리하기 쉽게 만드는 방법을 찾고 계시다면 이 기능이 마음에 드실 겁니다.

신호란 무엇입니까?
간단히 말해서 Signals는 Angular 애플리케이션에서 데이터 변경을 처리하는 새로운 방법입니다. 전통적으로 우리는 서비스, RxJS 또는 상태 관리 라이브러리를 사용하여 데이터 변경을 처리합니다. 신호는 구성 요소 내의 데이터 변경 사항을 추적하고 대응하는 보다 간단하고 효율적인 방법을 제공합니다.

신호를 사용하는 이유
신호 사용 방법을 알아보기 전에 신호를 사용하려는 이유에 대해 이야기해 보겠습니다. 몇 가지 이유는 다음과 같습니다.

단순성: 신호를 사용하면 데이터 변경 사항을 더 쉽게 관리하고 추적할 수 있습니다.
성능: 신호는 불필요한 재렌더링을 줄여 성능을 최적화하는 데 도움이 될 수 있습니다.
반응성: 데이터 변경 처리에 대해 보다 반응적이고 선언적인 접근 방식을 제공합니다.

신호 시작하기
손을 더럽혀 Angular 애플리케이션에서 신호를 어떻게 사용할 수 있는지 살펴보겠습니다.

1단계: Angular 설치(아직 설치하지 않은 경우)
먼저 Angular가 설치되어 있는지 확인하세요. 그렇지 않은 경우 Angular CLI를 사용하여 설치할 수 있습니다.

npm install -g @angular/cli

로그인 후 복사

그런 다음 새 Angular 프로젝트를 만듭니다.

ng new angular-signals-demo
cd angular-signals-demo

로그인 후 복사

2단계: 신호 설정
Signals를 사용하려면 @angular/signals 패키지를 설치해야 합니다. 다음 명령을 실행하세요:

npm install @angular/signals

로그인 후 복사

3단계: 구성 요소에서 신호 사용

이제 Signals를 사용하는 간단한 컴포넌트를 만들어 보겠습니다. 먼저 새 구성요소를 생성합니다.

ng generate component signal-demo

로그인 후 복사

생성된 signal-demo.comComponent.ts 파일을 열고 다음과 같이 수정하세요.

import { Component, Signal } from '@angular/core';

@Component({
  selector: 'app-signal-demo',
  templateUrl: './signal-demo.component.html',
  styleUrls: ['./signal-demo.component.css']
})
export class SignalDemoComponent {
  countSignal = new Signal<number>(0);

  increment() {
    this.countSignal.update((currentValue) => currentValue + 1);
  }

  decrement() {
    this.countSignal.update((currentValue) => currentValue - 1);
  }
}

로그인 후 복사

이 예에서는 카운터 값을 보관하기 위해 countSignal을 만들었습니다. 또한 신호 값을 업데이트하는 두 가지 방법(증가 및 감소)이 있습니다.

4단계: 템플릿에 신호 바인딩
다음으로 신호를 템플릿에 바인딩해 보겠습니다. signal-demo.comComponent.html을 열고 다음과 같이 업데이트하세요.

<div>
  <h1>Counter: {{ countSignal.value }}</h1>
  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

로그인 후 복사

여기서는 countSignal의 값을 표시하고 증가 및 감소 메소드를 버튼에 바인딩합니다.

실제 신호 보기
이제 애플리케이션을 실행하여 신호가 실제로 작동하는지 살펴보겠습니다. Angular 개발 서버를 시작하려면 다음 명령을 사용하십시오.