리액트 Rxjs 사용법 예시

Introduction

리액트 프로젝트에서 비동기 데이터 관리는 중요한 부분입니다. 이를 위해 Rxjs 라이브러리는 다양한 오퍼레이터를 제공하여 비동기 데이터 관리를 쉽게 할 수 있습니다. 이번 포스트에서는 Rxjs를 이용한 리액트 프로젝트의 예시를 살펴보겠습니다.

Rxjs란?

Rxjs는 Reactive Extensions for JavaScript의 약자로, 비동기 데이터 스트림을 다루기 위한 라이브러리입니다. 이를 이용하면 데이터를 쉽게 관리할 수 있습니다.

Rxjs를 이용한 예시

Rxjs를 이용하여 Todo List를 구현하는 예제를 살펴보겠습니다.

1. Rxjs 설치하기

먼저, Rxjs를 설치해야 합니다. 설치는 아래와 같은 명령어를 입력하면 됩니다.

npm install rxjs

2. Todo List 컴포넌트 만들기

다음으로, Todo List를 표시할 컴포넌트를 만들어야 합니다. 이번 예제에서는 함수형 컴포넌트를 이용하겠습니다.

import React from 'react';
import { Observable } from 'rxjs';

const TodoList = () => {
  const [todos, setTodos] = React.useState([]);

  React.useEffect(() => {
    const todo$ = Observable.of([
      { id: 1, title: 'Todo 1' },
      { id: 2, title: 'Todo 2' },
      { id: 3, title: 'Todo 3' },
    ]);

    const subscription = todo$.subscribe(setTodos);

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

  return (
    <div>
      <h2>Todo List</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

3. 결과 확인하기

위와 같이 작성한 Todo List 컴포넌트를 사용하여 결과를 확인해보겠습니다. 아래와 같이 App.js 파일을 작성합니다.

import React from 'react';
import TodoList from './TodoList';

const App = () => {
  return (
    <div>
      <h1>React Rxjs Example</h1>
      <TodoList />
    </div>
  );
};

export default App;

Todo List를 표시하는 것을 확인할 수 있습니다.

Conclusion

Rxjs를 이용하면 비동기 데이터 관리를 쉽게 할 수 있습니다. 이번 예제를 통해 Rxjs를 이용한 Todo List 구현 방법을 살펴보았습니다. Rxjs를 이용하여 프로젝트를 구현할 때, 다양한 오퍼레이터를 이용하여 데이터를 쉽게 관리할 수 있습니다. 1

fredkeemhaus