변환 연산자
map, switchMap, mergeMap 및 concatMap을 사용합니다.
변환 연산자은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
연산자란
연산자는 .pipe() 안에서 조합해 스트림을 변환하는 함수입니다. 변환 연산자는 방출된 각 값을 바꾸거나 내부 옵저버블을 출력으로 평탄화합니다.
map
map은 Array.map처럼 각 방출 값을 변환하지만, 시간의 흐름에 따라 동작합니다.
import { of, map } from 'rxjs';
of(1, 2, 3).pipe(
map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30고차 매핑이 필요한 이유
각 값이 다른 옵저버블(예: HTTP 호출)을 실행하면 옵저버블의 옵저버블이 만들어집니다. 평탄화 연산자(switchMap, mergeMap, concatMap)는 내부 옵저버블을 구독하고 그 값을 방출합니다.
switchMap
switchMap은 새 값이 들어오면 이전 내부 옵저버블을 취소합니다. 입력 중 검색에 적합하며, 이전 요청은 폐기됩니다.
import { switchMap } from 'rxjs';
searchTerm$.pipe(
switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));mergeMap
mergeMap(별칭 flatMap)은 내부 옵저버블을 동시에 실행하고 모든 방출 값을 병합합니다. 아무것도 취소하지 않습니다.
import { mergeMap } from 'rxjs';
ids$.pipe(
mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallelconcatMap
concatMap은 내부 옵저버블을 대기열에 넣고 순서대로 한 번에 하나씩 실행하며 각각의 완료를 기다립니다. 순서가 중요할 때 사용하세요.
import { concatMap } from 'rxjs';
saveQueue$.pipe(
concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in orderexhaustMap
exhaustMap은 내부 옵저버블이 실행 중일 때 새 값을 무시합니다. 버튼을 클릭해 제출할 때 중복 제출을 방지하는 데 유용합니다.
import { exhaustMap } from 'rxjs';
submitClicks$.pipe(
exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes적절한 평탄화 연산자 선택하기
switchMap: 이전 작업 취소(검색).
mergeMap: 모두 병렬 실행(서로 독립적인 기록).
concatMap: 순서를 지키며 하나씩 실행(순차 저장).
exhaustMap: 작업 중에는 무시(로그인 버튼).
switchMap과 취소
switchMap은 진행 중인 내부 옵저버블을 취소하므로 기반 HTTP 요청의 구독도 해제합니다. Angular는 이를 중단된 요청으로 처리하므로 대역폭을 절약할 수 있습니다.
map과 평탄화 연산자 조합하기
평탄화한 후 데이터를 추출하기 위해 map을 사용하는 경우가 많습니다.
searchTerm$.pipe(
switchMap(term => this.http.get('/api/search?q=' + term)),
map(res => res.items)
).subscribe(items => console.log(items));중첩된 subscribe 피하기
subscribe 안에서 subscribe하지 마세요. 대신 평탄화 연산자를 사용하세요. 그러면 파이프라인을 선언적으로 유지하고 정리도 올바르게 처리할 수 있습니다.
// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);빠른 확인
변환 연산자에 대한 이해도를 확인해 보세요.
복습: 변환 연산자
map은 값을 변환하고, 평탄화 연산자는 내부 옵저버블을 처리합니다.
switchMap: 이전 작업을 취소합니다.mergeMap: 병렬로 처리합니다.concatMap: 순차적으로, 순서를 유지하며 처리합니다.exhaustMap: 작업 중에는 무시합니다.
다음 주제: 필터링 연산자
자주 묻는 질문
“변환 연산자” 강의는 무료인가요?
네 — “변환 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“변환 연산자”에서 뭘 배우나요?
map, switchMap, mergeMap 및 concatMap을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“변환 연산자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.