기본 생성 함수: Observable을 생성하는 다양한 방법

1. 개념

Observable은 데이터를 방출(emit)하는 객체입니다. 이 데이터는 시간에 따라 변할 수 있으며, 비동기적으로 발생할 수도 있습니다. Observable을 생성하는 방법은 여러 가지가 있으며, 각 방법은 데이터의 출처와 방출 방식에 따라 적합한 경우가 다릅니다. of, from, interval, fromEvent는 가장 기본적인 Observable 생성 함수입니다.

2. 왜 사용하는가

다양한 방식으로 Observable을 생성해야 하는 이유는 데이터의 원천이 다양하기 때문입니다. 예를 들어, 정적인 값을 방출하는 Observable이 필요할 수도 있고, 배열의 각 요소를 순차적으로 방출하는 Observable이 필요할 수도 있습니다. 또한, 특정 시간 간격으로 데이터를 방출하거나, DOM 이벤트에 반응하는 Observable이 필요할 수도 있습니다. 이러한 다양한 요구사항을 충족하기 위해 여러 가지 생성 함수가 존재합니다.

3. 동작 원리

각 생성 함수의 동작 원리는 다음과 같습니다.

• of: 주어진 인수를 순서대로 방출하고 완료(complete)됩니다.
• from: 배열이나 iterable 객체의 각 요소를 순서대로 방출하고 완료됩니다.
• interval: 지정된 시간 간격마다 숫자를 방출합니다. complete되지 않고 무한히 방출합니다.
• fromEvent: DOM 요소에서 발생하는 특정 이벤트에 반응하여 이벤트를 방출합니다.

4. 예제 (인라인 코드로만, fenced 코드블록 금지)

• of 예제: of(1, 2, 3).subscribe(val => console.log(val))은 1, 2, 3을 순서대로 콘솔에 출력합니다.
• from 예제: from([4, 5, 6]).subscribe(val => console.log(val))은 4, 5, 6을 순서대로 콘솔에 출력합니다.
• interval 예제: interval(1000).subscribe(val => console.log(val))은 1초마다 숫자를 콘솔에 출력합니다. (0, 1, 2, ...)
• fromEvent 예제: 먼저 버튼 요소를 가져오고 (const button = document.querySelector('button')), 그다음 fromEvent(button, 'click').subscribe(event => console.log('버튼 클릭!'))를 실행하면 버튼을 클릭할 때마다 콘솔에 '버튼 클릭!'이 출력됩니다.

5. 실무 사용 사례

• of: API 응답을 래핑하여 일관된 Observable 인터페이스를 제공할 때 유용합니다.
• from: 배열 형태로 존재하는 초기 데이터를 Observable 스트림으로 변환할 때 사용합니다.
• interval: 폴링(polling) 방식으로 서버에서 데이터를 주기적으로 가져올 때 사용합니다.
• fromEvent: 사용자의 UI 상호작용(클릭, 키 입력 등)을 감지하고 이에 반응하는 기능을 구현할 때 사용합니다.

6. 주의할 점

• interval은 complete되지 않으므로, 필요에 따라 take 등의 연산자를 사용하여 방출 횟수를 제한해야 합니다. 그렇지 않으면 메모리 누수가 발생할 수 있습니다.
• fromEvent로 생성된 Observable은 해당 DOM 요소가 제거되면 자동으로 종료되지만, 명시적으로 unsubscribe를 호출하는 것이 좋습니다.

7. 핵심 정리

of, from, interval, fromEvent는 RxJS에서 Observable을 생성하는 기본적인 함수들입니다. 각 함수의 특징과 동작 원리를 이해하고, 상황에 맞게 적절한 함수를 선택하여 사용해야 합니다. 이러한 기본 생성 함수를 능숙하게 활용하면 복잡한 비동기 데이터 스트림을 효과적으로 관리할 수 있습니다.