Angular / RxJS

 

RxJS

RxJS는 Reactive Extensions for JavaScript의 약자로, Observable 기반의 데이터 스트림을 다루는 라이브러리입니다. Angular에서는 주로 HTTP 요청, 이벤트 처리, 상태 관리 등에 활용됩니다.

 

주요 개념

1. Observable: 비동기적으로 데이터 스트림을 생성하고 처리할 수 있는 객체입니다. 이벤트, HTTP 응답 등을 Observable로 변환하여 다룰 수 있습니다.
2. Operators: Observable이 발행하는 데이터를 변환하거나 필터링하는 함수들입니다. 예를 들어, map, filter, mergeMap 등의 연산자가 있습니다.
3. Subject: Observable과 마찬가지로 데이터 스트림을 발행할 수 있지만, 여러 구독자에게 데이터를 공유할 수도 있습니다.

 

Observable 사용법

1. Observable 생성

import { Observable } from 'rxjs';

protected subscriptions: Array<Subscription> = [];
private keydownObservable$: Observable<Event>;

2. Observable 사용

  addKeyboardEvents() {
    this.keydownObservable$ = fromEvent(window, 'keydown');
    this.subscriptions.push(
      this.keydownObservable$.pipe(debounceTime(1000)).subscribe(async (event) => {
        await this.onKeyDown(event);
      })
    );
  }

---

1. fromEvent() 함수 호출

this.keydownObservable$ = fromEvent(window, 'keydown');

• fromEvent() 함수는 RxJS의 함수 중 하나로, DOM 이벤트를 Observable로 변환하는 역할을 합니다. 여기서는 window 객체에서 keydown 이벤트를 Observable로 변환하여 keydownObservable$ 변수에 할당합니다.

2. pipe() 메서드와 연산자 사용

this.keydownObservable$.pipe(debounceTime(1000))

 

• pipe() 메서드는 Observable에 연산자(operators)를 적용하기 위해 사용됩니다. debounceTime(1000) 연산자는 이벤트가 발생한 후 일정 시간(여기서는 1000ms, 즉 1초) 동안 다음 이벤트가 발생하지 않을 때까지 기다린 후, 마지막 이벤트를 발행합니다. 이를 통해 연속적으로 발생하는 이벤트를 제어할 수 있습니다.

3. subscribe() 메서드 호출

.subscribe(async (event) => {
  await this.onKeyDown(event);
})

• subscribe() 메서드는 Observable을 구독하며, Observable이 값을 발행할 때마다 실행할 로직을 정의합니다. 여기서는 keydownObservable$에서 발생한 이벤트를 구독하고, 이벤트가 발생할 때마다 onKeyDown() 메서드를 비동기적으로 호출합니다.

추가적인 설명

• this.subscriptions.push(...) 부분은 이 구독을 관리하기 위해 클래스에서 사용하는 배열인 subscriptions에 구독을 추가하는 것입니다. 이는 나중에 컴포넌트가 파괴되거나 더 이상 필요하지 않을 때, 해당 구독을 쉽게 해제할 수 있도록 도와줍니다.
• async와 await 키워드를 사용하여 onKeyDown(event) 메서드를 비동기적으로 호출하는 이유는, 이벤트 핸들러에서 비동기 작업을 수행할 필요가 있기 때문입니다. 예를 들어, 이벤트 핸들러 내에서 HTTP 요청을 보내거나 다른 비동기 작업을 처리할 수 있습니다

---

 

Subject, Subscription 사용법

 

1. Subject, Subscription 생성

 

import { Subject, Subscription } from 'rxjs';


private subscriptions: Array<Subscription> = [];
public totalSearch$ = new Subject();

 

2. Subject, Subscription 사용

async ngOnInit() {
    this.subscriptions.push(
      this.totalSearch$
        .pipe(
          debounceTime(this.dueTime),
          switchMap((text) => this.service.getSearch(+this.userId, text))
        )
        .subscribe(({ data }) => {
          this.setSearch(data);
        })
    );
}




  search() {
    this.totalSearch$.next(this.searchText);
  }

 

1. this.subscriptions.push(...)

• this.subscriptions 배열에 Observable의 구독을 추가합니다. 이는 나중에 컴포넌트가 파괴되거나 더 이상 필요하지 않을 때 구독을 해제할 수 있도록 도와줍니다.

2. this.totalSearch$

• this.totalSearch$는 Subject 또는 BehaviorSubject입니다. Subject는 Observable이자 Observer 역할을 할 수 있는 객체로, 여기서는 검색어를 발행하는 데이터 스트림을 나타냅니다.

3. pipe(...) 메서드와 연산자들

• pipe() 메서드는 Observable에 연산자(operators)를 적용하기 위해 사용됩니다.
  • debounceTime(this.dueTime): 사용자가 입력을 할 때, 입력의 끝을 감지하기 위해 일정 시간(this.dueTime) 동안 대기합니다. 이는 연속적으로 입력을 받을 때, 사용자의 마지막 입력을 기준으로 검색 요청을 보내기 위해 사용됩니다.
  • switchMap((text) => this.service.getSearch(+this.userId, text)): 입력된 검색어(text)를 기반으로 HTTP 요청을 보냅니다. switchMap 연산자는 새로운 Observable을 반환하고, 이전 Observable의 구독을 해지합니다. 따라서 가장 최근의 검색어에 대한 검색 요청만 처리하게 됩니다.

4. subscribe(...)

• subscribe() 메서드는 Observable을 구독하고, Observable이 값을 발행할 때마다 실행할 로직을 정의합니다.
  • ({ data }) => { this.setSearch(data); }: 구독할 Observable이 값을 발행할 때 실행될 콜백 함수입니다. 여기서는 HTTP 요청으로부터 받은 데이터를 처리하는 setSearch() 메서드를 호출합니다.
    • this.setSearch(data);: 받아온 데이터를 처리하여 화면에 표시하거나 다른 작업을 수행합니다. 이 코드에서는 검색 결과 데이터(data)를 처리하여 컴포넌트의 상태에 반영합니다.

5. this.totalSearch$.next(this.searchText);

• search() 메서드는 사용자가 입력한 검색어(this.searchText)를 totalSearch$ Subject에 발행합니다. 이렇게 하면 ngOnInit()에서 구독하고 있는 Observable에서 검색어를 받아 처리할 수 있습니다.