리액트에서 RxJS를 활용한 반응형 프로그래밍

Table of Contents

RxJS와 리액트의 만남: 비동기 데이터 효율적 관리

리액트에서 RxJS를 통합해 비동기 데이터를 관리하고, API 처리를 효율적으로 하며, 성능을 개선하는 방법을 배워보자.

ReactJS는 동적이고 응답성 높은 사용자 인터페이스 구축에 필수적인 라이브러리로 자리 잡았다. 그러나 애플리케이션이 커지면서 비동기 데이터 스트림을 관리하는 것이 점점 더 복잡해진다. 이런 문제를 해결하기 위해 RxJS가 활용된다. 이 라이브러리는 observable을 통한 반응형 프로그래밍을 제공하며, RxJS 연산자는 복잡한 비동기 데이터 흐름을 간단하게 처리하도록 도와준다.

RxJS란 무엇인가?

RxJS(Reactive Extensions for JavaScript)는 observable을 사용하여 비동기 데이터 스트림을 효율적으로 관리할 수 있는 라이브러리이다. observable은 시간에 따라 도착하는 데이터 컬렉션으로, 데이터 변화에 반응할 수 있게 한다.

RxJS를 ReactJS에서 사용하는 이유

향상된 비동기 처리: RxJS의 map, filter, debounceTime 같은 연산자를 사용하면 비동기 작업을 우아하게 관리할 수 있다.
깨끗하고 읽기 쉬운 코드: RxJS는 함수형 프로그래밍 방식을 장려하여 코드를 더 선언적으로 만들어 준다.
강력한 에러 처리: catchError, retry와 같은 RxJS 연산자는 에러를 우아하게 처리할 수 있게 한다.

React 프로젝트에서의 RxJS 설정

기본적인 React 프로젝트에 RxJS를 설치하고 설정해보자.

npx create-react-app rxjs-react-example
cd rxjs-react-example
npm install rxjs

이제 RxJS를 설치했으니 리액트 컴포넌트에 통합할 준비가 되었다.

RxJS와 ReactJS 통합 예제

사용자 데이터를 API로부터 가져와 리스트로 표시하는 간단한 앱을 만들어보자. RxJS 연산자를 활용해 비동기 데이터 스트림을 효율적으로 관리할 수 있다.

간단한 React 컴포넌트 생성

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
    const [data, setData] = useState([]);
    const [error, setError] = useState(null);

    return (
        <div>
            <h1>Data Fetcher</h1>
            {error && <p>Error: {error}</p>}
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default DataFetcher;

RxJS와 observable 생성

import { of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const fetchData = () => {
    return ajax.getJSON('https://jsonplaceholder.typicode.com/users').pipe(
        map(response => response),
        catchError(error => of({ error: true, message: error.message }))
    );
};

useEffect와 observable 구독

useEffect(() => {
    const subscription = fetchData().subscribe({
        next: (result) => {
            if (result.error) {
                setError(result.message);
            } else {
                setData(result);
            }
        },
        error: (err) => setError(err.message),
    });

    return () => subscription.unsubscribe();
}, []);

데이터 가져오기 프로세스 강화

import { debounceTime, tap } from 'rxjs/operators';

const fetchData = () => {
    return ajax.getJSON('https://jsonplaceholder.typicode.com/users').pipe(
        debounceTime(500),
        tap(() => setLoading(true)),
        map(response => response),
        catchError(error => of({ error: true, message: error.message })),
        tap(() => setLoading(false))
    );
};

ReactJS에서의 일반적인 RxJS 연산자 사용법

map: observable이 방출하는 각 값을 변환한다.
filter: 특정 조건을 충족하지 않는 값을 필터링한다.
debounceTime: observable이 방출하는 값을 일정 시간 지연시킨다.
switchMap: observable의 최신 결과만 처리할 때 사용한다.

RxJS는 ReactJS 애플리케이션에서 비동기 데이터를 효과적으로 관리하는 강력한 도구이다. 이해하고 적용하는 것은 애플리케이션 확장성과 코드를 효율적으로 관리하는 데 큰 도움이 된다.

출처 : 원문 보러가기