async 파이프
수동으로 정리하지 않고 템플릿에서 구독합니다.
async 파이프은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
async 파이프의 기능
async 파이프는 템플릿에서 옵저버블(또는 Promise)을 구독하고, 가장 최근에 방출된 값을 렌더링하며, 컴포넌트가 제거될 때 자동으로 구독을 해제합니다.
기본 사용법
템플릿에서 옵저버블을 직접 바인딩하고 async를 통해 전달하세요.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}async로 객체 렌더링하기
어떤 방출 타입과도 함께 사용할 수 있습니다. json이나 date 같은 다른 파이프와 조합해 보세요.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>여러 번 구독하지 않기
async를 사용할 때마다 구독이 하나씩 생성됩니다. 같은 옵저버블에 여러 번 사용하면 HTTP 호출도 여러 번 발생합니다. as 구문을 사용해 한 번만 구독하세요.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>새 제어 흐름과 함께 사용하기
최신 Angular에서는 @if와 as를 함께 사용해 동일한 단일 구독 패턴을 구현하세요.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}대기 중에는 Null
첫 번째 값이 방출되기 전에는 async가 null을 반환합니다. 로딩 상태를 명시적으로 처리하세요.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}수동으로 구독을 해제할 필요 없음
파이프가 제거될 때 자동으로 구독을 해제하므로 메모리 누수의 한 유형을 완전히 없앨 수 있습니다. 따라서 템플릿에서 옵저버블을 사용할 때 이 방식이 권장됩니다.
옵저버블 전환하기
바인딩된 옵저버블 참조가 바뀌면 async 파이프가 기존 옵저버블의 구독을 해제하고 새 옵저버블을 자동으로 구독합니다.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}BehaviorSubject와 async 파이프
BehaviorSubject 서비스와 async 파이프를 함께 사용하면 수동 구독 코드 없이 깔끔한 반응형 UI를 만들 수 있습니다.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>async 파이프와 toSignal 비교
둘 다 구독을 자동으로 관리합니다. async 파이프는 템플릿에서 사용하고, toSignal()은 값을 signal로 컴포넌트 코드에 가져옵니다. 값이 필요한 위치에 따라 선택하세요.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}모범 사례 요약
컴포넌트에서 수동으로 구독하기보다 async 파이프(또는 toSignal)를 우선 사용하세요. 중복 구독을 방지하려면 as를 사용하고, 초기 null/로딩 상태는 항상 처리하세요.
빠른 확인
async 파이프에 대한 이해도를 확인해 보세요.
복습: async 파이프
async 파이프는 템플릿에서 구독하고 제거될 때 정리합니다.
as를 사용해 한 번만 구독하세요(@if 또는 *ngIf와 함께 사용).- 첫 번째 값이 방출되기 전에는 null을 반환하므로 로딩 상태를 처리하세요.
- 템플릿에서는 수동 구독보다 이 방식을 우선 사용하세요.
RxJS 기초 과정을 완료하셨습니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 38
- 레슨
- 144
자주 묻는 질문
“async 파이프” 강의는 무료인가요?
네 — “async 파이프” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“async 파이프”에서 뭘 배우나요?
수동으로 정리하지 않고 템플릿에서 구독합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“async 파이프” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.