React vs RxJS

2024. 08. 28.

6분

495개

웹 개발 분야에서 "Reactive"라는 용어가 자주 언급되는 두 가지 주요 기술이 있다. 바로 React와 RxJS다. 이 두 기술은 모두 반응형(Reactive) 개념을 핵심으로 삼고 있지만, 각각의 접근 방식과 구현 방법은 상당히 다르다. 과연 이 두 기술에서 말하는 "Reactive"의 의미는 동일할까?

오늘은 React와 RxJS를 비교하면서 각각의 맥락에서 "Reactive"가 무엇을 의미하는지 알아보려고 한다.

React: 선언적 UI의 "Reactive"

React에서 "Reactive"는 주로 UI의 반응성을 의미한다.

React의 핵심 개념

  1. 선언적 UI: React에서는 UI를 어떻게 변경할지가 아니라, 어떤 상태에서 UI가 어떻게 보여야 하는지를 선언한다.
  2. 단방향 데이터 흐름: 데이터는 항상 위에서 아래로 흐른다 (부모 컴포넌트에서 자식 컴포넌트로).
  3. 상태 변화에 따른 자동 UI 업데이트: 상태가 변경되면 React가 자동으로 관련 UI를 업데이트한다.

예시 코드

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=> setCount(count + 1)}>Click me</button>
    </div>
  );
}

이 예시에서 count 상태가 변경될 때마다 React는 자동으로 UI를 업데이트한다. 이것이 바로 React의 "Reactive" 특성이다.

RxJS: 데이터 스트림의 "Reactive"

RxJS에서 "Reactive"는 비동기 데이터 스트림의 처리와 관련이 있다.

RxJS의 핵심 개념

  1. Observable: 시간에 따라 발생하는 데이터 스트림을 나타낸다.
  2. Operator: 데이터 스트림을 변형하고 조작하는 함수들이다.
  3. Observer: Observable을 구독하고 데이터를 소비하는 객체다.

예시 코드

import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';

const input = document.getElementById('search-input');

const typeahead = fromEvent(input, 'input').pipe(
  map((e) => e.target.value),
  debounceTime(300)
);

typeahead.subscribe((value) => {
  console.log(`Searching for: ${value}`);
});

이 예시에서 RxJS는 입력 이벤트를 Observable로 변환하고, 연산자를 사용해 데이터 스트림을 처리한다. 이것이 RxJS의 "Reactive" 방식이다.

React vs RxJS: "Reactive"의 차이점

  1. 범위:

    • React: 주로 UI의 반응성에 초점을 맞춘다.
    • RxJS: 모든 종류의 비동기 데이터 스트림을 다룬다.

  2. 접근 방식:

    • React: 선언적 프로그래밍을 통해 상태 변화에 따른 UI 업데이트를 자동화한다.
    • RxJS: 함수형 프로그래밍 패러다임을 사용하여 데이터 스트림을 조작한다.

  3. 용도:

    • React: 주로 사용자 인터페이스 구축에 사용된다.
    • RxJS: 복잡한 비동기 로직 처리에 적합하다.

  4. 데이터 흐름의 관리:

    • React는 상태와 props에 의존하여 데이터를 관리하며, 상태가 변화할 때마다 UI가 다시 렌더링된다.
    • RxJS는 데이터 스트림의 변화를 Observable로 감지하고, 이 스트림에 연산자를 적용하여 비동기 이벤트를 처리한다.

  5. 비동기 처리:

    • React 자체는 비동기 처리를 위한 특별한 도구를 제공하지 않는다.
    • RxJS는 비동기 이벤트를 간단하게 관리하고 처리할 수 있는 강력한 도구를 제공한다.

  6. 적용 범위:

    • React는 UI 라이브러리로, 주로 사용자 인터페이스를 구성하는 데 사용된다.
    • RxJS는 보다 일반적인 라이브러리로, UI뿐만 아니라 다양한 비동기 작업에서도 사용될 수 있다.

결론

"Reactive"는 맥락에 따라 다른 의미를 가질 수 있다. React에서는 UI의 자동 업데이트를, RxJS에서는 비동기 데이터 스트림의 처리를 의미한다. 두 기술 모두 각자의 방식으로 "반응형"을 구현하고 있으며, 때로는 함께 사용되어 더욱 강력한 애플리케이션을 만들어내기도 한다.

RxJS는 반응형 프로그래밍(Reactive Programming)의 개념을 깊이 있게 다루며, 복잡한 비동기 데이터 흐름을 다루는 데 강점을 가진다. 반면 React는 UI 개발에 초점을 맞추어 선언적 프로그래밍을 강조하며, 상태 변화에 따른 UI 업데이트를 간편하게 처리할 수 있다. 엄밀히 말하면 React는 Reative하다 볼 수 있지만, Reactive Programming은 아닌 것이다.

결론적으로, 두 접근법은 상호 배타적이지 않으며, 프로젝트의 요구사항과 팀의 전문성에 따라 적절한 도구를 선택하거나 두 접근법을 결합하여 사용하는 것이 최적의 해결책이 될 수 있다.