Q1: RxJS에서 비동기 처리는 어떻게 이루어지나요?
A1: RxJS는 Observable 스트림을 통해 비동기 이벤트나 데이터를 관리합니다. Observable은 비동기 작업(예: HTTP 요청, 타이머, 이벤트 등)을 감싸며, 구독(subscribe)을 통해 데이터가 비동기로 발행될 때 콜백 함수가 실행됩니다.
---
Q2: 비동기 작업을 Observable로 만드는 방법은?
A2: RxJS는 다양한 유틸리티 함수를 제공합니다. 예를 들어:
- `of(value)`는 즉시 동기적으로 값을 방출하지만, `timer`, `interval` 등은 비동기 이벤트를 생성합니다.
- `from(Promise)`를 사용하면 Promise를 Observable로 변환해 비동기 처리가 가능합니다.
- `ajax` 함수로 HTTP 요청을 비동기로 수행할 수 있습니다.
---
Q3: Observable 구독 시 비동기 데이터는 어떻게 처리하나요?
A3: `.subscribe(next, error, complete)` 메서드를 통해 비동기 이벤트가 발생할 때마다 다음과 같이 처리할 수 있습니다.
- `next`: 비동기 데이터가 도착했을 때 호출
- `error`: 에러 발생 시 호출
- `complete`: 스트림이 완료됐을 때 호출
---
Q4: RxJS에서 비동기 작업을 순차적, 병렬적으로 제어하는 방법은?
A4:
- `concatMap`, `exhaustMap` 같은 연산자를 사용하면 내부 Observable이 완료될 때까지 대기하며 순차적으로 처리할 수 있습니다.
- `mergeMap`은 다수의 비동기 작업을 병렬로 모두 실행합니다.
- `switchMap`은 새로운 비동기 작업이 발생하면 이전 작업을 취소하고 최신 작업만 처리합니다.
---
Q5: 비동기 함수(예: async/await)와 RxJS는 어떻게 함께 사용하나요?
A5: 비동기 함수가 반환하는 `Promise`를 `from` 연산자를 통해 Observable로 변환하여 RxJS 스트림 내에서 처리할 수 있습니다. 또한, `defer` 연산자를 사용해 Observable 생성 시점에 비동기 함수를 실행할 수도 있습니다.
---
Q6: 에러 처리는 어떻게 하나요?
A6: `catchError` 연산자를 사용해 비동기 스트림 내에서 에러를 가로채고 복구하거나 다른 Observable로 대체할 수 있습니다. 구독 시 `error` 콜백에서도 에러를 받을 수 있습니다.
---
Q7: 비동기 처리 중 상태 관리(로딩, 데이터, 에러)는 어떻게 하나요?
A7: `tap` 연산자를 이용해 비동기 스트림 시작 시 로딩 상태를 true로 변경하고, `finalize`로 종료 시 로딩 상태를 false로 변경하는 패턴을 자주 사용합니다. `BehaviorSubject`를 활용해 상태를 관리할 수도 있습니다.
---
요약하자면, RxJS는 Observable을 통해 비동기 작업을 선언적이고, 조합 가능하며, 효율적으로 처리할 수 있는 강력한 도구를 제공합니다.
<a href='https://sangseek.com/sangseeks/RxJS/ko'>RxJS</a>(Reactive Extensions for JavaScript)는 비동기 프로그래밍을 위한 라이브러리로, 주로 이벤트 기반 프로그래밍을 쉽게 처리할 수 있도록 돕습니다. RxJS는 Observable이라는 개념을 중심으로 구성되어 있으며, 이를 통해 비동기 데이터 스트림을 생성하고 조작할 수 있습니다. 아래에서는 RxJS에서 비동기 처리를 어떻게 하는지에 대해 자세히 설명하겠습니다. 1. Observable Observable은 RxJS의 핵심 개념으로, 비동기 데이터 스트림을 나타냅니다. Observable은 데이터의 흐름을 나타내며, 이 데이터는 이벤트, HTTP 요청, 타이머 등 다양한 소스에서 발생할 수 있습니다. Observable을 생성하는 방법은 여러 가지가 있으며, 가장 일반적인 방법은 `of`, `from`, `interval`, `timer` 등의 함수를 사용하는 것입니다. ```javascript import { of, from, interval } from 'rxjs'; // 단일 값 방출 const observable1 = of(1, 2, 3); // 배열로부터 Observable 생성 const observable2 = from([4, 5, 6]); // 일정 간격으로 값 방출 const observable3 = interval(1000); // 1초마다 0부터 시작하는 숫자 방출 ``` 2. Subscription Observable은 기본적으로 "lazy"합니다. 즉, Observable이 생성되었다고 해서 데이터가 즉시 방출되는 것은 아닙니다. 데이터가 방출되기 위해서는 `subscribe` 메서드를 호출해야 합니다. `subscribe` 메서드는 Observable에 대한 구독을 시작하고, 데이터가 방출될 때마다 지정된 콜백 함수를 실행합니다. ```javascript const subscription = observable1.subscribe({ next(x) { console.log('값:', x); }, error(err) { console.error('오류:', err); }, complete() { console.log('완료'); } }); ``` 3. Operators RxJS는 다양한 연산자를 제공하여 Observable을 변형하고 조작할 수 있습니다. 이러한 연산자는 데이터 스트림을 필터링, 변환, 결합하는 데 유용합니다. 예를 들어, `map`, `filter`, `mergeMap`, `switchMap` 등의 연산자를 사용할 수 있습니다. ```javascript import { map, filter } from 'rxjs/operators'; const observable = of(1, 2, 3, 4, 5).pipe( filter(x => x % 2 === 0), // 짝수만 통과 map(x => x * 10) // 각 값을 10배로 변환 ); observable.subscribe(x => console.log(x)); // 20, 40 ``` 4. 비동기 처리 RxJS를 사용하면 비동기 처리를 매우 간단하게 할 수 있습니다. 예를 들어, HTTP 요청을 통해 데이터를 가져오는 경우, `ajax` 연산자를 사용할 수 있습니다. ```javascript import { ajax } from 'rxjs/ajax'; const apiUrl = 'https://api.example.com/data'; const data$ = ajax.getJSON(apiUrl); data$.subscribe({ next(data) { console.log('데이터:', data); }, error(err) { console.error('오류:', err); } }); ``` 5. Subject Subject는 Observable과 Observer의 역할을 모두 수행할 수 있는 특별한 유형의 Observable입니다. Subject를 사용하면 여러 구독자에게 동일한 데이터를 전송할 수 있습니다. 이는 이벤트 기반 아키텍처에서 유용하게 사용됩니다. ```javascript import { Subject } from 'rxjs'; const subject = new Subject(); subject.subscribe({ next: (v) => console.log(`구독자 1: ${v}`) }); subject.subscribe({ next: (v) => console.log(`구독자 2: ${v}`) }); subject.next(1); // 구독자 1: 1, 구독자 2: 1 subject.next(2); // 구독자 1: 2, 구독자 2: 2 ``` 6. Error Handling RxJS에서는 비동기 처리 중 발생할 수 있는 오류를 처리하는 방법도 제공합니다. `catchError` 연산자를 사용하여 오류를 처리할 수 있습니다. ```javascript import { of } from 'rxjs'; import { catchError } from 'rxjs/operators'; const observableWithError = of(1, 2, 3).pipe( map(x => { if (x === 2) { throw new Error('오류 발생'); } return x; }), catchError(err => { console.error('오류:', err); return of('대체 값'); // 오류 발생 시 대체 값 방출 }) ); observableWithError.subscribe(x => console.log(x)); ``` 결론 RxJS는 비동기 프로그래밍을 위한 강력한 도구로, Observable을 통해 데이터 스트림을 쉽게 관리하고, 다양한 연산자를 통해 데이터를 변형할 수 있습니다. 비동기 처리, 오류 처리, 이벤트 기반 아키텍처 등 다양한 시나리오에서 유용하게 사용될 수 있습니다. RxJS를 활용하면 복잡한 비동기 로직을 간결하고 명확하게 표현할 수 있습니다.
