Angular 20에서의 Resource API 변경사항: rxResource를 통한 리소스 쿼리

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular 20 이상 버전을 사용하는 개발자 및 rxResource를 활용한 데이터 fetching에 관심 있는 프론트엔드 개발자

핵심 요약

• request → params, loader → stream으로 리네임됨. stream은 리소스 스트리밍 및 쿼리에 사용
• ResourceStatus는 'idle', 'loading', 'reloading', 'error', 'resolved', 'local'의 문자 유니온 타입
• rxResource를 사용해 Pokemons 데이터를 페이징 처리하고, URL 변경 시 자동 쿼리 수행

섹션별 세부 요약

1. Introduction

• Angular 20의 Resource API 주요 변경사항:
• request → params
• loader → stream
• ResourceStatus 타입 정의

2. Query a Resource

• rxResource 예시:
• params는 URL 시그널을 기반으로 반응형 데이터 제공
• stream은 PokemonPageService.paginate(url)을 호출해 데이터 로드
• defaultValue로 초기 상태 설정

3. Demos

• PokemonPageService:
• forkJoin을 사용해 여러 HTTP 요청 병렬 처리
• 결과를 PokemonPageType에 결합 (count, previous/next URL, Pokemons 배열)
• PokemonPageComponent:
• rxResource 생성 및 URL 시그널 반응
• @if, @for, @let을 사용한 템플릿 로직 (이전/다음 버튼 처리, 상태 관리)

4. Resources

• 관련 PR: PR60919
• 문서: Angular Resource API, rxResource API

결론

• rxResource는 반응형 데이터 로딩 및 상태 관리에 효과적. stream을 통해 자동 쿼리 수행
• ResourceStatus를 활용해 loading, reloading, resolved 상태를 구분하고 UI 업데이트
• forkJoin 및 HttpClient를 결합해 병렬 데이터 요청 최적화
• @if, @for, @let을 사용한 템플릿 로직으로 사용자 상호작용 처리 (이전/다음 버튼, 재로드)