Resource API로 시그널의 비동기 데이터 관리하기

linked 시그널로 상태를 파생하는 방법을 배웠으니, 이제 Resource API로 비동기 데이터를 처리하는 방법을 살펴봅시다. Resource API는 시그널로 비동기 작업을 관리하는 강력한 방법입니다. 로딩 상태, 오류 처리, 요청 관리를 기본으로 제공합니다.

이번 실습에서는 사용자 프로필 로더를 만들면서 resource() 함수로 데이터를 비동기로 로딩하고 비동기 작업의 여러 상태를 처리하는 방법을 배웁니다.

resource 함수와 API 불러오기

기존 import 구문에 resource를 추가하고 모의 API 함수를 불러옵니다.

// Add resource to existing imports
import {Component, signal, computed, resource, ChangeDetectionStrategy} from '@angular/core';
// Import mock API function
import {getUserData} from './user-api';

사용자 데이터용 리소스 생성하기

사용자 ID 시그널을 기반으로 사용자 데이터를 로딩하는 리소스를 컴포넌트 클래스의 프로퍼티로 추가합니다.
```
userId = signal(1);

userResource = resource({
  params: () => ({id: this.userId()}),
  loader: (params) => getUserData(params.params.id),
});
```
리소스를 조작하는 메서드 추가하기

사용자 ID를 변경하고 리소스를 다시 로딩하는 메서드를 추가합니다.
```
loadUser(id: number) {
  this.userId.set(id);
}

reloadUser() {
  this.userResource.reload();
}
```
params 시그널이 변경되면 자동으로 다시 로딩됩니다. reload()로 직접 다시 로딩할 수도 있습니다.
리소스 상태용 computed() 시그널 생성하기

리소스의 여러 상태에 접근하는 computed() 시그널을 추가합니다.
```
isLoading = this.userResource.isLoading;
hasError = computed(() => this.userResource.status() === 'error');
```
리소스는 'loading', 'reloading', 'resolved', 'error' 상태를 나타내는 status() 시그널과 로드한 데이터가 담긴 value() 시그널, 데이터가 있는지 안전하게 확인하는 hasValue() 메서드를 제공합니다. isLoading() 시그널은 'loading'과 'reloading' 상태에서 모두 true입니다.
버튼 연결하고 리소스 상태 표시하기

템플릿 구조는 이미 제공되어 있습니다. 이제 각 기능을 연결합니다:

1단계. 버튼에 클릭 핸들러를 추가합니다:
```
<button (click)="loadUser(1)">Load User 1</button>
<button (click)="loadUser(2)">Load User 2</button>
<button (click)="loadUser(999)">Load Invalid User</button>
<button (click)="reloadUser()">Reload</button>
```
2단계. 플레이스홀더를 리소스 상태 처리 코드로 교체합니다:
```
@if (isLoading()) {
  <p>Loading user...</p>
} @else if (hasError()) {
  <p class="error">Error: {{ userResource.error()?.message }}</p>
} @else if (userResource.hasValue()) {
  <div class="user-info">
    <h3>{{ userResource.value().name }}</h3>
    <p>{{ userResource.value().email }}</p>
  </div>
}
```
리소스 상태를 다음과 같이 확인할 수 있습니다:
- isLoading() - 데이터를 가져오는 동안 true입니다.
- hasError() - 오류가 발생하면 true입니다.
- userResource.hasValue() - 데이터가 있으면 true입니다.
- userResource.value() - 로딩한 데이터에 접근합니다.
- userResource.error() - 오류 정보에 접근합니다.

시그널과 Resource API를 사용하는 방법을 배웠습니다! 기억할 핵심 개념은 다음과 같습니다:

반응형 리소스: params가 변경되면 자동으로 다시 로딩합니다.
내장 상태 관리: status(), value(), error() 시그널을 제공합니다.
자동 정리: 요청 취소와 정리 작업을 자동으로 처리합니다.
직접 제어: 필요하면 요청을 직접 다시 로딩하거나 중단할 수 있습니다.

다음 단계에서는 입력 시그널로 컴포넌트에 데이터를 전달하는 방법을 배웁니다!

resource 함수와 API 불러오기

사용자 데이터용 리소스 생성하기

리소스를 조작하는 메서드 추가하기

리소스 상태용 computed() 시그널 생성하기

버튼 연결하고 리소스 상태 표시하기