RxJS debounceTime operator를 통해 Event request 줄이기

---

검색어를 입력하는 동시에 엔터키, 검색 버튼을 누를 필요 없이 결과값을 즉시 반영할 수 있도록 다음과 같이 구현하였다.

const dispatchEvent = debounce((targetText) => {
            this.callback(targetText);
        }, this.delayTime);
        
this.textinputElement.addEventListener('keyup', (event) => {
	dispatchEvent(event.target.value);
});

keyup 이벤트 핸들러를 Input 요소에 등록해주고 이벤트 발생 시 관련 함수를 호출해주도록 하였다.

 

RxJS debounce operator

위와 같은 기능을 RxJS를 통해 리팩토링하였다.현 소스 상에서는 처리해야 될 비동기 작업이 많지 않기 때문에 크게 상관은 없지만, 좀 더 명확하고 효율적으로 코드를 예측할 수 있도록 다수의 비동기 작업을 처리할 경우에는 RxJS를 사용해 볼 수 있다.

 

RxJS

• RxJS는 Reactive Extensions For JavaScrpt 라이브러리
• RxJS는 이벤트 스트림을 Observable 이라는 객체로 표현한 후 비동기 이벤트 기반의 프로그램을 작성을 용이케 함

 Observable

• 시간을 축으로 연속적인 데이터를 저장하는 컬렉션을 표현한 객체
• 스트림(stream): 특정 객체를 관찰하는 Observer에게 여러 이벤트나 값을 보내는 역할을 함

Observer

• Observable에 의해 전달된 데이터를 소비하는 주체
• 구독(Subscription): Observable이 배출하는 하나 또는 연속된 항목에 반응
• 동시성 연산을 가능케 함

Operator

• Observable를 생성 및 조작하는 함수
• Observable를 생성 및 각각의 Observable을 연결하기도 함
• 도트체이닝: Operator는 현재 Observable 인스턴스 기반으로 항상 새로운 Observable 인스턴스를 반환

---

이전에는 Input 태그에 시간을 정해서 지정된 시간 내에 여러 번 검색을 하여 value가 변경되더라도, debounce 함수 내에 setTimeout을 통해 의도적으로 딜레이 시간을 걸어주어 요청을 지연시키도록 구현하였다.

 

이를 대신에 이번에는 RxJS operator인 debounceTime을 사용하였다.

debounceTime은 output 사이에서 특정 시간보다 적은 시간에 배출된 값들을 버린다.

const eventSource = fromEvent(this.textinputElement, 'keyup')
                .debounceTime(this.delayTime); //지정된 시간 내에선 observer에서 감지를 하더라도 해당 값을 버림
            
         this.subscription = eventSource.subscribe((event) => {
                dispatchEvent(event.target.value);
        })

 

현 소스 코드 상에서는 구현이 안되어 있지만 Input 필드의 auto-complete를 구현할 때 많이 사용되는 RxJS opserator 중에 distinctUntilChanged가 있다.  

https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged

distinctUntilChanged

Only emit when the current value is different than the last.

 

distinctUntilChanged는 현재의 값이 마지막 입력한 값과 다를 때만 값을 내보낸다.

distinctUntilChanged는 이전의 value와 현재 value가 다를 경우에만 해당 값을 처리하도록 해주는 오퍼레이터인데, 여기서 유의할 점이 있다.

우리는 보통 Input 요소 내에 있는 value 프로퍼티를 통해서 키워드 값을 가져온다. 이렇게 되면 이벤트가 발생할때 마다 value 프로퍼티가 바인딩되어 있는 event object_전체 이벤트의 객체에 대한 참조값(주소값)은 매번 달라지기 때문에 distinctUntilChanged를 통해 원하는 결과를 얻을 수 없다(Observable에서 배출되는 값은 event object 전체이다).

 

위와 같은 참조값에 의한 비교 대신에 실제 값에 의한 비교를 위해서 map operator 을 사용할 수 있다.

observable
.map(event => event.target.value) //현재 이벤트 객체의 실제 값으로
.debounceTime(delayTime)
.distinctUntilChanged()

https://rxjs.dev/api/operators/map

RxJS

Similar to the well known Array.prototype.map function, this operator applies a projection to each value and emits that projection in the output Observable.

 

map operator는 다른 API들과 동일하게 발생하는 요소들을 다른 값으로 변환해 준다.

발생하는 값을 다른 값으로 변환 및 대체해야 하는 경우에 적합하다.