리액티브 프로그래밍(Reactive Programming)은 데이터 스트림(Stream)과 변화의 전파(Propagation of Change) 를 기반으로 하는 프로그래밍 패러다임이다. 비동기 데이터 흐름을 선언적으로 처리한다.
핵심 개념
Observable (관찰 가능한 스트림):
이벤트 소스 → 클릭, HTTP 응답, 소켓, 타이머
Observer (구독자):
next(value): 새 값 수신
error(err): 오류 처리
complete(): 스트림 종료
Operator (변환):
map, filter, reduce, merge, switchMap...
javascript
import { fromEvent, interval } from 'rxjs';
import { map, filter, debounceTime, switchMap } from 'rxjs/operators';
// 검색창 자동완성
const searchInput = document.getElementById('search');
fromEvent(searchInput, 'input')
.pipe(
map(e => e.target.value), // 값 추출
filter(v => v.length > 2), // 3글자 이상만
debounceTime(300), // 300ms 후 처리 (타이핑 대기)
switchMap(query => // 이전 요청 취소 + 새 요청
fetch('/api/search?q=' + query).then(r => r.json())
)
)
.subscribe({
next: results => renderResults(results),
error: err => console.error(err)
});
마블 다이어그램
소스: ─●──●──●──●──
map(x => x*2)
결과: ─●──●──●──●──
(각 값이 2배)
소스: ─●──●──●──●──
filter(x => x>2)
결과: ────────●──●──
(2보다 큰 것만)
리액티브 시스템 선언 (Reactive Manifesto)
응답성(Responsive), 탄력성(Resilient), 유연성(Elastic), 메시지 주도(Message Driven)의 4가지 속성.
관련 개념
