Angular의 함수형 프로그래밍: 주입 및 리소스 탐색

Angular의 진화하는 생태계는 보다 기능적이고 반응적인 프로그래밍 패러다임으로 전환하고 있습니다. 시그널, 리소스 API, 삽입 기능과 같은 도구를 사용하여 개발자는 애플리케이션 로직을 단순화하고 상용구를 줄이며 재사용성을 향상시킬 수 있습니다.

이 블로그 게시물에서는 Angular의 최신 기능을 통해 개발자가 깔끔하고 선언적이며 반응적인 방식으로 비동기 논리를 처리할 수 있는 방법을 살펴봅니다.

Angular의 기능적 특징의 주요 이점

1. 종속성 주입을 통한 재사용 가능한 함수: 주입 기능을 사용하면 개발자는 Angular의 종속성 주입 시스템과 원활하게 통합되는 독립형 함수를 만들 수 있습니다. 이는 구성 요소 및 서비스에서 비즈니스 로직을 분리하여 애플리케이션 전체에서 기능을 재사용할 수 있게 해줍니다.
2. 간소화된 상태 관리: 로딩, 성공, 오류 상태를 자동으로 처리합니다.
3. 향상된 반응성: 종속성이 변경되면 자동으로 데이터를 업데이트합니다.
4. 간단한 상용구: 수동 구독이나 수명 주기 관리가 아닌 논리에 중점을 둡니다.
5. 가독성 향상: 선언적 템플릿을 사용하면 UI 상태 전환을 쉽게 이해할 수 있습니다.

---

1단계: API 및 데이터 모델

이 예에서는 REST API에서 게시물을 가져옵니다. 각 게시물의 구조는 다음과 같습니다.

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

API의 기본 URL은 다음을 통해 제공됩니다.InjectionToken:

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

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});

---

2단계: 데이터 가져오기 함수 정의

1. 전통적인 RxJS 기반 접근 방식

다음 함수는 Angular의 HttpClient를 사용하여 ID로 게시물을 가져옵니다.

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<Post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<Post>(`${baseUrl}/posts/${postId}`);
}

구성 요소에서 이 함수를 사용하려면 이를 관찰 가능 항목에 바인딩하고 비동기 파이프를 사용하여 결과를 표시할 수 있습니다.

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

제한 사항

• 반응성 문제: 신호 변경(예: postId)이 자동으로 새 가져오기를 트리거하지 않습니다.
• 수동 오류 처리: 로드 및 오류 상태에 대한 사용자 정의 논리를 작성해야 합니다.

---

2. 신호 기반 리소스 API 접근 방식

Resource API는 반응성과 상태 관리를 단순화합니다. Resource API를 사용하는 함수는 다음과 같습니다.

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<Post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<Post, { id: number }>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}

이 접근 방식:

• postId가 변경되면 자동으로 데이터를 다시 로드합니다.
• 로드, 오류 및 성공 상태를 선언적으로 처리합니다.

구성요소:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

---

리소스 API의 주요 기능

선언적 상태 관리

Resource API는 로딩, 오류, 성공 등의 상태를 자동으로 관리합니다. 이렇게 하면 사용자 정의 플래그가 필요 없으며 템플릿이 더 깔끔해집니다.

반동

Resource API는 Signals와 긴밀하게 통합되어 있습니다. 신호를 변경하면 로더 기능이 자동으로 트리거되어 UI에 항상 최신 데이터가 반영됩니다.

오류 처리

오류는 .error()를 통해 중앙 집중화되고 노출되므로 템플릿의 오류 관리가 단순화됩니다.

자동 수명주기 관리

API는 종속성(예: postId)이 변경되면 진행 중인 요청을 취소하여 경합 상태와 오래된 데이터를 방지합니다.

---

RxJS와 리소스 API: 빠른 비교

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (loading, error)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

---

결론

Angular의 삽입 기능과 신호 기반 리소스 API는 비동기 논리 단순화에 있어 한 단계 더 발전한 모습을 보여줍니다. 이러한 도구를 사용하여 개발자는 다음을 수행할 수 있습니다.

1. 비즈니스 로직을 구성 요소에서 분리합니다.
2. Angular의 종속성 주입 시스템과 완벽하게 통합되는 재사용 가능한 함수를 작성하세요.
3. 상태 관리를 위한 상용구를 제거합니다.
4. 반응형 및 선언형 애플리케이션을 쉽게 구축하세요.

특히 Resource API는 자동 반응성과 선언적 상태 처리를 제공하는 최신 Angular 프로젝트에 이상적입니다. 오늘부터 이러한 기능을 살펴보고 Angular 개발을 한 단계 더 발전시키세요!

위 내용은 Angular의 함수형 프로그래밍: 주입 및 리소스 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!