[RxJS / angular] 4. 옵저버블 생성 함수(of, from, interval, fromEvent)

앵귤러에서 RxJS를 사용할 때 직접 옵저버블을 생성하는 일은 그다지 많지 않습니다. 직접 만드는 대신에 Angualr가 우리를 위해 생성해주는 옵저버블을 사용하게 됩니다. 하지만 직접 만들고 싶다면 Observable 생성자를 사용해서 옵저버블을 만들 수 있지만 권장하는 방법은 내장 생성 함수를 사용하는 것입니다. of, from, interval, fromEvent와 같은 생성 함수에 대해 알아보겠습니다.

---

of 와 from 생성 함수 

of는 내장 생성 함수 중 하나입니다.  

of는 정의된 값의 집합을 사용하여 Observable가능한 항목을 만들고 각 값을 내보내고 완료합니다. 위 예에서 옵저버블은 두 개의 문자열을 방출하고 완료됩니다. 

또는 from 생성 함수가 있습니다. 

from은 배열과 같은 데이터 구조에서 Observable을 만들고 각 개별 값을 방출(emit)한 후 완료합니다. 위 예는 of와 마찬가지로 두 개의 문자열을 내보내고 완료합니다. from은 앱 내의 데이터 구조에서 옵저버블을 생성하는데 매우 유용합니다. 

of와 from의 차이점 

of와 from이 비슷해 보이는데요. 어떠한 차이점이 있을까요? 여기 아래에 반죽 배열이 있습니다.  

이 배열을 from에 전달하면 from 생성 함수가 데이터 구조의 각 요소(이 경우 배열)를 가져와서 방출을 하고 이 경우는 두 개의 반죽이 방출됩니다. 동일한 배열을 of 함수에 전달하면 개별 반죽이 아닌 반죽 배열 단 하나만의 항목이 방출됩니다. of함수의 경우 각 인수를 내보내는데 첫 번째 인수가 반죽 배열이기 때문에 배열이 통으로 배출되게 됩니다. 

만약 of 함수로 from 함수와 동일한 결과를 얻기 위해선 어떻게 해야 할까요? 

정답은 자바스크립트의 스프레드 연산자(...)를 사용하면 됩니다. 스프레드 연산자를 사용하면 배열 요소를 of 함수의 인수로 확장이 되고 따로따로 반죽을 방출하게 되므로 from과 동일한 결과를 얻게 됩니다. 

 

fromEvent 와 interval

of와 from이외에도 RxJS라이브러리에서 사용할 수 있는 여러 생성 함수들이 있습니다. 

fromEvent 

fromEvent는 document, object, model, 또는 dom 이벤트에서 옵저버블을 생성합니다.  

위 예는 요소의 클릭 이벤트에서 Observable을 만들고 있습니다. 

Interval 

interval 역시 옵저버블을 생성해주는 생성 함수 입니다. Inteval은 정의한 간격으로 일련의 번호를 방출하는 옵저버블을 만들어줍니다. interval은 테스트 혹은 비동기식 숫자를 생성하는데 자주 사용됩니다. 위 예는 옵저버블이 중지될 때까지 1초마다 일련의 번호를 방출합니다. 

---

앵귤러에서 from, of 실습 

앵귤러에서 간단히 옵저버블 생성 함수를 실습해보겠습니다. 

ngOnInit에서 of와 from을 사용해서 옵저버블을 만들고 있습니다. 옵저버블을 만들고 subscribe를 호출해서 구독을 시작하면 방출되는 항목을 수신할 수 있게 됩니다. 구독을 하면서 next와 error, complete에 대한 메서드를 가지는 옵저버 객체를 옵저버블에 전달해서 각 항목에 대한 처리를 정의해 줍니다. 예제에서는 단순히 콘솔에 항목을 출력하고 있습니다. of와 from은 자동으로 완료되고 complete가 호출되므로 구독을 취소할 필요는 없습니다. 

콘솔 로그에 출력된 문자열을 보면 자동으로 완료가 되어 complete를 호출한 것을 확인할 수 있습니다. 

---

여기까지 수고하셨습니다. 이외에 다양한 옵저버블 생성 함수가 존재하지만, 앵귤러에서는 of, from, interval, fromevent정도만 사용하시면 편리하게 옵저버블을 사용할 수 있습니다.