웹 개발에서 "Reactive"라는 용어가 자주 언급되는 두 가지 기술이 있다. 바로 React와 RxJS다. 둘 다 "Reactive"라는 이름을 내세우고 있지만, 실제로는 완전히 다른 개념을 다루고 있다. 많은 개발자들이 이 두 기술을 처음 접할 때 혼란을 겪는다. "둘 다 반응형 아닌가?"라고 생각하기 쉽지만, 각각이 해결하려는 문제와 접근 방식은 상당히 다르다. 오늘은 이 두 기술의 "Reactive" 개념을 자세히 비교해보자. ## Reactive Programming, 대체 뭘까? 프로그래밍에서 "Reactive"라는 용어를 처음 들었을 때 막연히 "반응한다"는 의미로만 이해하기 쉽다. 하지만 실제로는 훨씬 구체적인 의미를 가지고 있다. **Reactive Programming**은 데이터의 흐름과 변화 전파에 초점을 맞춘 프로그래밍 패러다임이다. 마치 스프레드시트에서 셀 A1이 변경되면 A1을 참조하는 모든 셀이 자동으로 업데이트되는 것처럼, 데이터의 변화가 연쇄적으로 전파되는 방식이다. 핵심은 다음과 같다: - **시간의 축**: 데이터가 시간에 따라 어떻게 변화하는지에 관심 - **선언적 접근**: "어떻게 할 것인가"보다 "무엇을 원하는가"에 집중 - **자동 전파**: 변화가 발생하면 관련된 모든 부분이 자동으로 업데이트 ## React의 "Reactive" - UI 중심의 반응성 React를 처음 배울 때 가장 신기한 부분이 상태가 변경되면 화면이 자동으로 업데이트되는 것이다. jQuery 시절에는 DOM을 직접 조작해야 했는데, React에서는 그냥 상태만 바꾸면 끝이다. ### React가 해결한 문제 전통적인 DOM 조작 방식을 생각해보자: ```javascript // jQuery 시절의 방식 let count = 0; $('#increment').click(() => { count++; $('#counter').text(`Count: ${count}`); $('#double').text(`Double: ${count * 2}`); if (count > 10) { $('#warning').show(); } else { $('#warning').hide(); } }); ``` 이 방식의 문제는 상태가 변경될 때마다 관련된 모든 UI 요소를 수동으로 업데이트해야 한다는 것이다. 애플리케이션이 복잡해질수록 놓치는 부분이 생기고, 버그가 발생하기 쉽다. React는 이 문제를 우아하게 해결했다: ```jsx function Counter() { const [count, setCount] = useState(0); return (

Count: {count}

Double: {count * 2}

{count > 10 &&

Warning: Count is high!

}

); } ``` 상태(`count`)만 변경하면 이를 참조하는 모든 UI가 자동으로 업데이트된다. 이것이 바로 React의 "Reactive" 특성이다. ### React의 한계 하지만 React의 반응성은 주로 UI에 국한된다. 복잡한 비동기 로직을 다룰 때는 여전히 명령형 코드를 작성해야 한다. 검색 기능을 구현할 때를 생각해보자: ```jsx function SearchBox() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { if (!query.trim()) { setResults([]); return; } const timeoutId = setTimeout(async () => { setLoading(true); try { const response = await fetch(`/api/search?q=${query}`); const data = await response.json(); setResults(data); } catch (error) { console.error('Search failed:', error); } finally { setLoading(false); } }, 300); return () => clearTimeout(timeoutId); }, [query]); return (

setQuery(e.target.value)} placeholder="Search..." /> {loading &&

Searching...

} {/* 결과 렌더링 */}

); } ``` 코드가 복잡하고, 디바운싱, 로딩 상태, 에러 처리를 모두 수동으로 관리해야 한다. 만약 요청 취소나 재시도 로직까지 추가한다면 더욱 복잡해진다. ## RxJS의 "Reactive" - 진짜 Reactive Programming RxJS는 처음 접하면 어려울 수 있다. Observable, Subject, Operator... 새로운 개념들이 쏟아져 나온다. 하지만 핵심을 이해하고 나면 왜 "진짜" Reactive Programming이라고 하는지 알 수 있다. ### 데이터를 스트림으로 생각하기 RxJS의 핵심은 모든 것을 "시간에 따른 값의 스트림"으로 보는 것이다. 마우스 클릭, 키보드 입력, API 응답, 심지어 단순한 변수까지도 모두 스트림이다. 예를 들어, 사용자의 입력을 스트림으로 생각해보자: ``` 사용자 입력: r → re → rea → reac → react 시간축: 0ms 100ms 200ms 300ms 400ms ``` 이 스트림에 다양한 연산을 적용할 수 있다: - **디바운싱**: 300ms 동안 새 입력이 없으면 값을 방출 - **필터링**: 길이가 2 이상인 값만 통과 - **변환**: 각 값을 API 요청으로 변환 - **병합**: 여러 스트림을 하나로 합치기 ### RxJS로 검색 기능 다시 구현하기 같은 검색 기능을 RxJS로 구현하면 이렇게 된다: ```typescript import { fromEvent, of } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, catchError, startWith } from 'rxjs/operators'; // 입력 스트림 생성 const searchInput = document.getElementById('search'); const search$ = fromEvent(searchInput, 'input').pipe( map(event => event.target.value), debounceTime(300), distinctUntilChanged() ); // 검색 결과 스트림 const searchResults$ = search$.pipe( switchMap(query => { if (!query.trim()) { return of({ loading: false, results: [], error: null }); } return fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(results => ({ loading: false, results, error: null })) .catch(error => ({ loading: false, results: [], error })); }), startWith({ loading: false, results: [], error: null }) ); // 구독하여 UI 업데이트 searchResults$.subscribe(state => { // UI 업데이트 로직 }); ``` 코드가 훨씬 선언적이고 읽기 쉽다. 각 연산자가 하는 일이 명확하고, 복잡한 비동기 로직도 간단하게 표현된다. ### RxJS의 진짜 힘 RxJS의 진짜 힘은 복잡한 시나리오에서 드러난다. 예를 들어, 다음과 같은 요구사항이 있다고 해보자: > "사용자가 검색어를 입력하면 300ms 후에 검색을 실행하되, 새로운 검색어가 입력되면 이전 요청을 취소하고, 연속으로 같은 검색어가 입력되면 무시하며, 검색 중에는 로딩 상태를 표시하고, 에러가 발생하면 3초 후 자동으로 재시도한다." React로 구현하려면 상당히 복잡한 코드가 필요하지만, RxJS로는 비교적 간단하게 표현할 수 있다: ```typescript const searchWithRetry$ = search$.pipe( debounceTime(300), distinctUntilChanged(), switchMap(query => searchAPI(query).pipe( retry(3), delay(3000), catchError(error => of({ error })) ) ) ); ``` ## 두 접근법의 실제 비교 실무에서 두 기술을 모두 사용해본 관점에서 보면, 각각의 장단점이 명확하다. ### React만 사용했을 때 **장점:** - 학습 곡선이 완만하다 - 팀원들이 쉽게 이해할 수 있다 - 단순한 상태 관리에는 충분하다 - 생태계가 풍부하다 **단점:** - 복잡한 비동기 로직에서 코드가 지저분해진다 - 상태 관리가 복잡해질수록 버그가 생기기 쉽다 - 메모리 누수나 race condition을 직접 처리해야 한다 ### RxJS를 함께 사용했을 때 **장점:** - 복잡한 비동기 로직을 우아하게 처리할 수 있다 - 코드가 선언적이고 읽기 쉽다 - 메모리 관리나 취소 처리가 자동화된다 - 테스트하기 쉽다 **단점:** - 학습 곡선이 가파르다 - 팀원들의 러닝 커브가 필요하다 - 간단한 로직에는 오버엔지니어링이 될 수 있다 ## 실무에서의 선택 기준 다음과 같은 기준으로 선택하는 것이 좋다: ### React만 사용하는 경우 - 단순한 CRUD 애플리케이션 - 팀이 RxJS에 익숙하지 않은 경우 - 빠른 프로토타이핑이 필요한 경우 - 비동기 로직이 복잡하지 않은 경우 ### RxJS를 추가하는 경우 - 실시간 데이터가 중요한 애플리케이션 (채팅, 주식 거래 등) - 복잡한 폼 validation이 필요한 경우 - 여러 데이터 소스를 조합해야 하는 경우 - 성능 최적화가 중요한 경우 ## 함께 사용할 때의 팁 두 기술을 함께 사용할 때 몇 가지 주의사항이 있다: ### 1. 역할 분리하기 - React: UI 렌더링과 간단한 상태 관리 - RxJS: 복잡한 비동기 로직과 데이터 스트림 처리 ### 2. 메모리 누수 방지 ```typescript function MyComponent() { useEffect(() => { const subscription = someObservable$.subscribe(data => { // 데이터 처리 }); // 컴포넌트 언마운트 시 구독 해제 return () => subscription.unsubscribe(); }, []); } ``` ### 3. 적절한 추상화 RxJS 로직을 커스텀 훅으로 감싸서 재사용성을 높이자: ```typescript function useSearch(searchTerm$) { const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { const subscription = searchTerm$.pipe( debounceTime(300), switchMap(term => searchAPI(term)) ).subscribe(setResults); return () => subscription.unsubscribe(); }, [searchTerm$]); return { results, loading }; } ``` ## 핵심 차이점 정리 | 측면 | React | RxJS | |------|-------|------| | **범위** | 주로 UI의 반응성 | 모든 비동기 데이터 스트림 | | **접근 방식** | 선언적 UI, 상태 기반 | 함수형, 스트림 기반 | | **데이터 흐름** | 단방향, 상태 → UI | 다방향, 스트림 변환 | | **비동기 처리** | useEffect, Promise 기반 | Observable, Operator 기반 | | **학습 곡선** | 상대적으로 완만 | 가파름 (함수형 개념 필요) | | **용도** | UI 구축 | 복잡한 비동기 로직 | ## 마치며 React와 RxJS의 "Reactive"는 비슷해 보이지만 완전히 다른 개념이다. React는 UI의 반응성에 초점을 맞춘 반면, RxJS는 진정한 의미의 Reactive Programming을 구현한다. 두 기술 모두 각자의 영역에서 강력한 도구이며, 적절히 조합하면 더욱 강력한 애플리케이션을 만들 수 있다. 중요한 것은 각 도구의 특성을 이해하고, 상황에 맞게 선택하는 것이다. 개인적으로는 React로 시작해서 필요에 따라 RxJS를 점진적으로 도입하는 것을 추천한다. 처음부터 모든 것을 RxJS로 하려고 하면 오히려 복잡해질 수 있기 때문이다. 결국 좋은 개발자는 도구를 잘 아는 사람이 아니라, 상황에 맞는 적절한 도구를 선택할 수 있는 사람이라고 생각한다. React든 RxJS든, 문제를 해결하는 데 도움이 된다면 그것으로 충분하다.