RxJS 기본 Operator와 사용방법

RxJS 기본 Operator와 사용방법을 배워봅니다.

원문 링크입니다 : https://www.thisdot.co/blog/basic-rxjs-operators-and-how-to-use-them

Basic RxJS Operators and How to Use Them - This Dot Labs

이전 아티클에서 배운 Operators를 좀 더 확장할 것입니다.
또한 몇 가지 기본 Operator, Operator 하는 일, 사용 방법도 공유합니다.

RxJS Operators란 무엇인가요?

RxJS manual에서 가져왔습니다 : 

Operator는 복잡한 비동기 코드를 선언적 방식으로 쉽게 구성할 수 있도록 하는 필수 요소입니다.

걱정마세요, 대부분의 사람들은 이 말만으로도는 혼란스러울 것입니다. 운 좋게도 매뉴얼은 더 나은 정의를 제공합니다.

Operator는 현재 Observable을 기반으로 새로운 Observable을 생성하는 함수입니다.
이것은 순수 연산입니다.
즉, 이전 Observable은 수정되지 않은 상태로 유지됩니다.

본질적으로 Operator는 Observable을 입력으로 받고

Observable에서 스트리밍된 값에 대해 일부 논리를 수행하고

원래 Observable을 변경하지 않고 이러한 값으로 새 Observable을 생성하는 기계와 같습니다.

아래 다이어그램은 이를 좀 더 잘 설명하는 데 도움이 될 수 있습니다.

Operator가 Observable1에서 값을 가져와 원래 Observable에 영향을 주지 않고
원래 Observable1 값의 변경된 값을 내보내는 새로운 Observable2을 생성하는 것을 볼 수 있습니다.

이제 6가지 기본 Operator(of, from, map, tap, switchMap, take)를 살펴보겠습니다.

1. of - Creation Operator

of 연산자는 생성 Operator(creation Operator)입니다.
생성 Operator는 소스에서 Observable 스트림을 생성하는 함수입니다.

 

of Operator는 다양한 양의 값을 순차적으로 내보내는 Observable을 만들고
완료 알림을 방출합니다.

완료 알림은 Observable의 구독자에게 Observable이 더 이상 새 값을 내보내지 않을 것임을 알려줍니다.
이에 대해서는 후속 기사에서 더 자세히 다루겠습니다!

of를 살펴봅시다.

const arr = [1, 2, 3];

const arr$ = of(arr);

arr$.subscribe((values) => console.log(`Emitted Values: `, values));

of는 Observable을 생성하고 우리가 구독할 때 즉시 값을 방출하기 시작합니다.
위의 출력은 다음과 같습니다.

Emitted Values: [1, 2, 3]

of는 배열 [1, 2, 3]을 값으로 내보냅니다.
이것은 우리가 다음에 살펴볼 from과 다릅니다.

2. from - Creation Operator

from 연산자는 Array, Promise 또는 Iterable을 Observable로 바꿉니다.

이 연산자는 Promise를 Observable로 변환하여 보다 반응적인 방식으로 처리할 수 있도록 합니다.
Promise가 resolved되거나 reject되면 모든 구독자(subscribers)에게 완료 알림이 전송됩니다.

 

또한 of와 달리 전체 값이 아닌 Array 또는 Iterable의 각 요소를 순서대로 방출합니다.
Array 또는 Iterable의 모든 요소가 내보내지면 완료 알림이 모든 구독자에게 전송됩니다.

const arr = [1, 2, 3];

const arr$ = from(arr);

arr$.subscribe((values) => console.log(`Emitted Values: `, values));

출력은 다음과 같습니다.

Emitted Values:  1
Emitted Values:  2
Emitted Values:  3

여러 로그에서 볼 수 있듯이 from Operator는 각 숫자를 가져와 값으로 내보냅니다.
구독자는 각 값을 순서대로 수신하고 console.log를 세 번 호출했습니다.

 

문자열과 같은 값을 사용할 수도 있습니다.

const fromString$ = from("Hello");
fromString$.subscribe((value) => console.log(`Emitted Values: `, value));

출력은 다음과 같습니다.

Emitted Values:  H 
Emitted Values:  e 
Emitted Values:  l 
Emitted Values:  l 
Emitted Values:  o

Promise는 다음과 같습니다.

const examplePromise = new Promise((resolve, reject) => {
  // Do some async code and resolve and object with an id property
  return resolve({ id: 1 });
});

const promise$ = from(examplePromise);
promise$.subscribe((value) => console.log(`Emitted Values: `, value));

출력은 다음과 같습니다.

Emitted Values:  {id: 1}

Promise가 resolved되면 resolved된 값이 Observable의 다음 값으로 방출됩니다.

3. map - Transformation Operator

map 연산자는 변환 연산자입니다.
하나의 Observable에서 값을 가져와 변환하고 변환된 값을 내보내는 새 Observable을 만듭니다.

map을 사용하면 Observable이 내보낸 값에 대한 간단한 변환을 수행할 수 있습니다.
두 가지 예를 살펴보겠습니다.

 

첫 번째 예에서는 from 연산자에 배열과 map을 사용하도록 변경합니다.
map도 사용하도록 수정합니다.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
  .pipe(map((value) => value + 10))
  .subscribe((value) => console.log(`Emitted Values: `, value));

.pipe()는 구독하기 전에 Observable의 스트림에 연산자를 적용하는 RxJS의 메서드입니다.

최종 변환된 값을 subscribe 메소드에 전달하기 전에 인수로 전달된 각 연산자를 통해 Observable에서 방출된 값을 파이프합니다.

pipe에 대해서는 다음 기사에서 더 자세히 다루겠습니다!

이 예에서 map은 변환 연산자이므로 Observable에서 받는 값을 변환할 수 있도록 .pipe() 호출 내에서 사용해야 합니다.
우리는 단순히 값에 10을 더하고 변환된 값을 내보냅니다.

Emitted Values:  11
Emitted Values:  12
Emitted Values:  13

map 연산자는 거의 모든 작업을 수행할 수 있지만
일반적인 사용 사례는 Observable 스트림에서 방출되는 객체에서 속성을 가져오는 것입니다.
우리는 Promise 예제를 사용하여 이것을 실제로 볼 수 있습니다:

const examplePromise = new Promise((resolve, reject) => {
  // Do some async code and resolve and object with an id property
  return resolve({ id: 1 });
});

const promise$ = from(examplePromise);
promise$
  .pipe(map((obj) => obj.id))
  .subscribe((value) => console.log(`Emitted Values: `, value));

우리는 map 연산자에게 Promise에서 resolved 객체의 id 속성을 반환하도록 지시하고 있습니다.
출력은 다음과 같습니다.

Emitted Values:  1

map 연산자는 매우 일반적으로 사용되는 연산자이며 여러 사용 사례에 매우 유용합니다!

4. switchMap - Transformation Operator

switchMap 연산자는 또 다른 변환 연산자입니다.
switchMap은 Observable에서 내보낸 값을 받은 다음

기존 스트림이 아닌 다른 소스의 새 Observable을 반환합니다.

map은 값=>값이라면 switchMap은 값=>옵저버블을 값 => 값으로 바꿔줌

사용자 ID를 내보내는 Observable이 있다고 가정해 보겠습니다.

ID와 관련된 전체 사용자 정보 객체를 가져온 다음 전체 세부 정보로 작업을 수행할 수 있습니다.

switchMap 연산자는 Observable에서 ID를 받은 다음 User 객체를 가져오는 요청의 응답이 포함된

새로운 Observable을 반환합니다.

스트림 전환의 관점에서 이것을 생각하는 것이 유용할 수 있습니다.
하나의 Observable 스트림에서 다른 스트림으로 전환 중입니다.

 

예제를 봅시다.

const userDetails$ = from(this.userService.getActiveUserID())
    .pipe(switchMap(id => this.userService.fetchUserForID(id)))
    .subscribe(user => console.log("Found user ", user));

여기에서 활성 사용자의 ID를 요청합니다.

그런 다음 userService에 백엔드에 대한 ajax 요청을 만들어 ID와 상관관계가 있는 사용자를 가져오도록 요청합니다.

fetchUserForID 호출이 Observable을 반환한다고 가정합니다.

(이는 ajax 연산자를 사용하여 가능합니다. 이에 대해서는 향후 기사에서 다룰 예정입니다!)

그런 다음 이 새로운 Observable 스트림을 구독하고
출력에서 ​​볼 수 있듯이(this.userService.getActiveUserID())에서 방출된 값이 아니라

새로운 스트림이 방출하는 값을 수신합니다.

Found user  {id: 1, name: "Test User", email: "test@test.com"}

switchMap 연산자는 원래(original,source) Observable 스트림에서 새 값을 수신하는 경우,
모든 in-flight 요청을 취소하므로 자동 검색 구현을 위한 훌륭한 후보가 됩니다!

5. tap - Utility Operator

tap 연산자는 반응형 프로그래밍 환경 바깥의 도우미 함수와 매우 유사한 유틸리티 오퍼레이터입니다.

탭을 사용하면 원본 스트림을 수정하거나 변경하지 않고도 Observable 스트림에서 액션이나 부작용을 수행할 수 있습니다.
값은 다음 Operator 또는 Subscriber에게 해당 함수가 없는것처럼 전달됩니다.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
  .pipe(tap((value) => console.log("Received value: ", value)))
  .subscribe((value) => console.log(`Emitted Values: `, value));

이는 다음을 출력합니다.

Received value:  1
Emitted Values:  1

Received value:  2
Emitted Values:  2

Received value:  3
Emitted Values:  3

6. take - Filtering Operator

take 연산자는 Filtering Operator입니다.
필터링 연산자를 사용하면 Observable에서 방출된 값을 수락하는 방법과 시기를 선택할 수 있습니다.

 

take는 가장 일반적이고 가장 단순한 필터링 연산자 중 하나입니다.
Observable에서 수신하려는 최대 값 수를 지정할 수 있습니다.

 

배열의 요소를 내보내는 from 예제를 사용하고
이 연산자를 더 잘 이해하기 위해 take와 결합해 보겠습니다.

const arr = [1, 2, 3];

const fromArr$ = from(arr);

fromArr$
  .pipe(take(1))
  .subscribe((value) => console.log(`Emitted Values: `, value));

아래 출력에서 ​​배열에서 1개의 값만 수신하고 사용했음을 알 수 있습니다.

Emitted Values:  1

예를 들어 사용자가 앱을 처음 클릭하는 경우와 같이
처리하려는 사용자 생성 이벤트(fromEvent)의 수를 제한하려는 상황에서 사용할 수 있습니다.

Conclusion

이 기사에서 우리는 RxJS에 존재하는 가장 일반적인 연산자라고 생각하는 몇 가지를 간략하게 다루었습니다.
이 6가지 연산자를 이해하면 RxJS를 마스터하는 단계에 도달한 것입니다!
RxJS를 기반으로 하는 더 많은 연산자와 더 심층적인 주제에 대해 논의하는 더 많은 기사를 계속 지켜봐 주십시오.