Angular Resource() 및 rxResource() API: 알아야 할 사항

몇 주 전 Angular v19 출시는 입력, 모델, 출력 및 신호 쿼리 API가 이제 공식적으로 안정 버전으로 승격되었습니다.

하지만 그게 다가 아닙니다! 이 주요 버전에는 신호 혁명을 더욱 발전시키기 위해 설계된 강력한 새 도구인 새로운

리소스 API도 도입되었습니다.

이름에서 알 수 있듯이 이 새로운

리소스 API는 신호의 모든 기능을 활용하여 비동기 리소스 로드를 단순화하도록 설계되었습니다!

중요: 이 글을 쓰는 시점에서 새로운 Resource API는 아직 실험 단계입니다. 이는 안정되기 전에 변경될 수 있음을 의미하므로 위험 부담으로 사용하십시오. ?

작동 방식과 비동기 리소스 처리를 단순화하는 방법을 살펴보겠습니다!

---

리소스 API

대부분의 신호 API는 동기식이지만 실제 애플리케이션에서는 서버에서 데이터를 가져오거나 사용자 상호 작용을 실시간으로 관리하는 등 비동기식 리소스를 처리하는 것이 필수적입니다.

여기서 새로운

리소스 API가 사용됩니다.

리소스를 사용하면 신호를 통해 비동기 리소스를 쉽게 사용할 수 있으므로 데이터 가져오기를 쉽게 관리하고 로드 상태를 처리하며 관련 신호 매개변수가 변경될 때마다 새 가져오기를 트리거할 수 있습니다.

리소스( ) 함수

리소스를 생성하는 가장 쉬운 방법은 resource() 함수를 사용하는 것입니다.

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

이 함수는

ResourceOptions 구성 객체를 입력으로 받아들여 다음 속성을 지정할 수 있습니다.

• 요청: 비동기 리소스에 대한 요청을 수행하는 데 사용되는 매개변수를 결정하는 반응형 함수
• loader: 선택적으로 제공된 요청 매개변수를 기반으로 리소스 값의 Promise를 반환하는 로딩 함수입니다. 이는 ResourceOptions;의 유일한 필수 속성입니다.
• equal: 로더의 반환 값을 비교하는 데 사용되는 같음 함수
• injector: Resource 인스턴스에서 사용하는 Injector를 재정의하여 상위 구성 요소나 서비스가 삭제될 때 자체적으로 삭제됩니다.

이러한 구성 덕분에 항상 효율적으로 사용되고 최신 상태로 유지되는

비동기 종속성을 쉽게 정의할 수 있습니다.

리소스 수명 주기

리소스가 생성되면 loader 함수가 실행되고 결과 비동기 요청이 시작됩니다.

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

request 함수가 변경에 따라 달라지는 신호가 있을 때마다 request 함수가 다시 실행되고, 새 매개변수를 반환하면 loader 함수가 트리거됩니다. 업데이트된 리소스 값을 가져오려면:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

요청 기능이 제공되지 않으면 리로드를 사용하여 리소스를 다시 로드하지 않는 한 로더 기능은 한 번만 실행됩니다. 방법(자세한 내용은 아래 참조).

마지막으로 상위 구성 요소나 서비스가 삭제되면 특정 인젝터가 제공되지 않는 한 리소스도 삭제됩니다.

이러한 경우 리소스는 활성 상태로 유지되며 제공된 인젝터 자체가 파기되어야만 파기됩니다.

abortSignal을 사용하여 요청 중단

데이터 가져오기를 최적화하기 위해 resource는 이전 값이 여전히 로드되는 동안 request() 계산이 변경되는 경우 처리되지 않은 요청을 중단할 수 있습니다.

이를 관리하기 위해 loader() 함수는 fetch와 같은 진행 중인 요청에 전달할 수 있는 abortSignal을 제공합니다. 요청은 abortSignal을 수신하고 작업이 트리거되면 작업을 취소하여 효율적인 리소스 관리를 보장하고 불필요한 네트워크 요청을 방지합니다.

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

이를 바탕으로 GET 요청에 주로 Resource API를 사용하는 것이 좋습니다. 일반적으로 문제를 일으키지 않고 취소해도 안전하기 때문입니다.

POST 또는 UPDATE 요청의 경우 취소하면 불완전한 데이터 제출이나 업데이트 등 의도하지 않은 부작용이 발생할 수 있습니다. 그러나 이러한 유형의 요청에 유사한 기능이 필요한 경우 effect() 메서드를 사용하여 작업을 안전하게 관리할 수 있습니다.

---

리소스를 사용하는 방법

리소스 API는 상태에 대한 여러 신호 속성을 제공하며, 이를 구성 요소나 서비스 내에서 직접 쉽게 사용할 수 있습니다.

• 값: 리소스의 현재 값을 포함하거나, 값을 사용할 수 없는 경우 정의되지 않음을 포함합니다. WritableSignal으로서 수동으로 업데이트할 수 있습니다.
• 상태: 리소스의 현재 상태를 포함하며 리소스가 수행하는 작업과 해당 값에서 기대할 수 있는 작업을 나타냅니다.
• 오류: 오류 상태인 경우 리소스 로드 중에 발생한 가장 최근 오류가 포함됩니다.
• isLoading: 리소스가 새 값을 로드하는지 아니면 기존 값을 다시 로드하는지 나타냅니다.

다음은 구성 요소 내에서 리소스를 사용하는 방법에 대한 예입니다.

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

이 예에서 리소스는 버튼을 클릭하여 증가할 수 있는 id 신호 값을 기반으로 API에서 데이터를 가져오는 데 사용됩니다.

사용자가 버튼을 클릭할 때마다 id 신호 값이 변경되어 loader 기능이 트리거되어 원격 API에서 새 항목을 가져옵니다.

리소스 API에 의해 노출된 신호 속성 덕분에 가져온 데이터로 UI가 자동으로 업데이트됩니다.

---

리소스 상태 확인

앞서 언급했듯이 status 신호는 특정 순간에 리소스의 현재 상태에 대한 정보를 제공합니다.

status 신호의 가능한 값은 ResourceStatus 열거형에 의해 정의됩니다. 다음은 이러한 상태와 해당 값에 대한 요약입니다.

• Idle = 0: 리소스에 유효한 요청이 없으며 로드를 수행하지 않습니다. 값()은 정의되지 않음;
• 오류 = 1: 오류로 인해 로드에 실패했습니다. 값()은 정의되지 않음;
• 로드 중 = 2: 리소스가 요청 변경으로 인해 현재 새 값을 로드하고 있습니다. 값()은 정의되지 않음;
• 다시 로드 중 = 3: 리소스가 현재 동일한 요청에 대해 새로운 값을 다시 로드하고 있습니다. value()는 다시 로드 작업이 완료될 때까지 이전에 가져온 값을 계속 반환합니다.
• 해결됨 = 4: 로딩이 완료되었습니다. value()에는 로더 데이터 가져오기 프로세스에서 반환된 값이 포함됩니다.
• Local = 5: set() 또는 update()를 통해 값이 로컬로 설정되었습니다. value()에는 수동으로 할당된 값이 포함됩니다.

이러한 상태는 리소스의 진행 상황을 추적하고 애플리케이션에서 비동기 작업을 더 효과적으로 처리하는 데 도움이 됩니다.

hasValue() 함수

이러한 상태의 복잡성을 고려하여 Resource API는 현재 상태에 따라 부울 값을 반환하는 hasValue() 메서드를 제공합니다.

이는 리소스 상태에 대한 정확한 정보를 보장하여 특정 상태에서 정의되지 않은 값에 의존하지 않고 비동기 작업을 처리하는 보다 안정적인 방법을 제공합니다.

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

이 방법은 반응형이므로 신호처럼 소비하고 추적할 수 있습니다.

isLoading() 함수

Resource API는 리소스가 현재 Loading 또는 Reloading 상태인지 여부를 반환하는 isLoading 신호도 제공합니다.

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

isLoading은 계산된 신호이므로 반응적으로 추적할 수 있으므로 신호 API를 사용하여 로드 상태를 실시간으로 모니터링할 수 있습니다.

---

WritableSignal로서의 리소스 값

리소스에서 제공하는 값 신호는 WritableSignal이며, 이를 사용하면 set() 및 update( ) 기능:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

참고: 보시다시피, 신호의 값을 수동으로 업데이트하면 상태도 5로 설정됩니다. 이는 "로컬"을 의미합니다. ", 값이 로컬로 설정되었음을 나타냅니다.

수동으로 설정된 값은 새 값이 설정되거나 새 요청이 수행될 때까지 유지되며 새 값으로 재정의됩니다.

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request, abortSignal }) =>
    fetch(RESOURCE_URL + request.id, { signal: abortSignal })
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// Triggers a new request, causing the previous fetch to be aborted
// Then the loader function to run again generating a new fetch request
id.set(2);

console.log(myResource.status()); // Prints: 2 (which means "Loading")

참고: Resource API의 value 신호는 새로운 LinkedSignal API와 동일한 패턴을 사용하지만 후드 아래에 있습니다. ?

편의 래퍼 메소드

value 신호 사용을 단순화하기 위해 Resource API는 set, update 및 asReadonly 메소드.

asReadonly 메소드는 value 신호의 읽기 전용 인스턴스를 반환하여 읽기 전용 액세스를 허용하고 우발적인 수정을 방지하므로 특히 유용합니다.

이 접근 방식을 사용하면

값:의 읽기 전용 인스턴스를 내보내 리소스 값의 변경 사항을 관리하고 추적하는 서비스를 만들 수 있습니다.

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

const BASE_URL = 'https://jsonplaceholder.typicode.com/todos/';

@Component({
  selector: 'my-component',
  template: `
    @if (myResource.value()) {
      {{ myResource.value().title }}
    }

    <button>Fetch next item</button>
  `
})
export class MyComponent {
  private id = signal(1);

  protected myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) =>
      fetch(BASE_URL + request.id).then((response) => response.json()),
  });

  protected fetchNext(): void {
    this.id.update((id) => id + 1);
  }
}

이를 통해 소비자가 값을 수정하는 것을 방지하고 의도하지 않은 변경의 위험을 줄이고 복잡한 데이터 관리의 일관성을 향상시킬 수 있습니다.

---

리소스 다시 로드 또는 삭제

비동기 리소스로 작업할 때 데이터를 새로 고치거나 리소스를 삭제해야 하는 시나리오에 직면할 수 있습니다.

이러한 시나리오를 처리하기 위해 리소스 API는 이러한 작업을 관리하기 위한 효율적인 솔루션을 제공하는 두 가지 전용 방법을 제공합니다.

다시 로드( ) 함수

reload() 메소드는 리소스에 비동기 요청을 다시 실행하여 최신 데이터를 가져오도록 지시합니다.

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

다시 로드가 성공적으로 시작되면 reload() 메서드는 true를 반환합니다.

상태가 이미 Loading 또는 Reloading인 경우와 같이 불필요하거나 상태가 인 경우와 같이 지원되지 않기 때문에 다시 로드를 수행할 수 없는 경우 유휴인 경우 메서드는 false를 반환합니다.

파괴( ) 함수

destroy() 메서드는 리소스를 수동으로 삭제하고, 요청 변경 사항을 추적하는 데 사용되는 모든 효과()를 삭제하고, 보류 중인 요청을 취소하고, 상태를 유휴로 설정하고 값을 다음으로 재설정합니다. 정의되지 않음:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});
console.log(myResource.status()); // Prints: 2 (which means "Loading")

리소스가 삭제된 후에는 더 이상 변경 요청이나 reload() 작업

에 응답하지 않습니다.

참고: 이 시점에서 value 신호는 쓰기 가능한 상태로 유지되지만 Resource는 의도한 목적을 잃고 더 이상 기능을 수행하지 않아 쓸모 없게 됩니다. . ?

---

rxResource( ) 함수

지금까지 소개된 거의 모든 신호 기반 API와 마찬가지로 Resource API도 RxJS와의 원활한 통합을 위한 상호 운용성 유틸리티를 제공합니다.

resource() 메서드를 사용하여 Promise 기반 Resource를 생성하는 대신 rxResource() 메서드를 사용하여 를 사용할 수 있습니다. 관찰 가능:

import { resource, signal } from "@angular/core";

const RESOURCE_URL = "https://jsonplaceholder.typicode.com/todos/";

const id = signal(1);
const myResource = resource({
  request: () => ({ id: id() }),
  loader: ({ request }) => fetch(RESOURCE_URL + request.id)
});

console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 1 , ... }

id.set(2); // Triggers a request, causing the loader function to run again
console.log(myResource.status()); // Prints: 2 (which means "Loading")

// After the fetch resolves

console.log(myResource.status()); // Prints: 4 (which means "Resolved")
console.log(myResource.value()); // Prints: { "id": 2 , ... }

참고: rxResource() 메서드는 실제로 rxjs-interop 패키지에 의해 노출됩니다.

loader() 함수에 의해 생성된 Observable은 첫 번째 방출 값만 고려하고 후속 방출은 무시합니다.

---

지금까지 읽어주셔서 감사합니다.

멋진 2024년 내내 저를 따라와주신 모든 분들께 감사드립니다. ??

많은 어려움이 있었지만 보람도 컸던 한 해였습니다. 저는 2025년에 대한 큰 계획을 가지고 있고 그 계획을 빨리 실행하고 싶습니다. ?

여러분의 의견을 듣고 싶으니 댓글, 좋아요, 팔로우를 남겨주세요. ?

그런 다음 정말 마음에 들었다면 커뮤니티, 기술 형제, 원하는 누구에게나 공유하세요. 그리고 LinkedIn에서 저를 팔로우하는 것도 잊지 마세요. ??

위 내용은 Angular Resource() 및 rxResource() API: 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!