Angular 팁 #4

Source: Dev.to

소개

Angular를 다루는 몇 가지 팁 – 프론트엔드 개발자 관점에서 (파트 4).
이 팁들은 이미 Angular 경험이 있다고 가정하므로 RxJS 기본 개념에 대해서는 깊게 다루지 않습니다.

concatMap을 사용해 배열을 순차적으로 처리하기

값들의 배열이 있고 각 항목에 대해 비동기 작업을 수행해야 할 때 concatMap이 최적의 선택입니다. concatMap은 각 항목을 순차적으로 처리하며, 이전 비동기 작업이 완료될 때까지 다음 항목으로 넘어가지 않습니다.

import { from, of } from 'rxjs';
import { concatMap, tap, delay } from 'rxjs/operators';

const numbers = [1, 2, 3];

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2000)
    );
  })
);

위 코드에서는 from 소스의 각 방출이 concatMap 내부의 비동기 작업이 완료될 때까지 기다렸다가 다음 값이 처리됩니다. console.log 문은 각 숫자마다 2초 지연 후에 실행됩니다.

최종 동기 작업 추가하기

모든 항목이 처리된 후에 또 다른 동기 작업을 실행해야 한다면, 추가 연산자를 concatMap 뒤에 배치하면 됩니다. 예를 들어 concatMap 바로 뒤에 tap을 추가하면 방출되는 각 값마다 한 번씩 실행됩니다:

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2_000)
    );
  }),
  tap(() => console.log('This goes here!'))
);

출력은 다음과 같습니다:

1
This goes here!
2
This goes here!
3
This goes here!

전체 값이 모두 처리된 한 번만 최종 작업을 실행하려면, 마지막 tap 앞에 last() 연산자를 삽입합니다:

const test$ = from(numbers).pipe(
  concatMap(number => {
    return of(null).pipe(
      tap(() => console.log(number)),
      delay(2_000)
    );
  }),
  last(),
  tap(() => console.log('This goes here!'))
);

이제 콘솔에 다음과 같이 표시됩니다:

1
2
3
This goes here!

"This goes here!" 로그는 모든 숫자 로그가 완료된 후 한 번만 실행됩니다.

결론

concatMap은 비동기 작업을 순차적으로 처리해야 할 때 매우 유용합니다. last와 같은 연산자와 결합하면 이후 동기 작업이 언제 실행될지 제어할 수 있습니다.

Angular 팁에 관한 블로그 #4는 여기까지입니다 – 도움이 되었길 바랍니다! 다음 포스트에서 뵙겠습니다.