소개

큰 웹 앱을 구축하는 것은 까다로울 수 있습니다. 특히 추적해야 할 다양한 정보가 많은 경우에는 더욱 그렇습니다. 하지만 걱정하지 마세요. RxJS가 도와드리겠습니다! 모든 데이터를 한 곳에서 관리하는 데 도움이 되는 정말 멋진 도구 같습니다.

RxJS를 사용하면 앱의 다양한 부분에서 사용할 수 있는 '데이터 스트림'을 만들 수 있습니다. 이는 앱을 통해 흐르는 큰 강과 같아서 모든 것을 연결하고 동기화합니다.

이 글에서는 RxJS를 사용하여 관리하기 쉽고 훌륭하게 작동하는 웹 앱을 구축하는 방법을 보여 드리겠습니다. 기사가 끝나면 RxJS를 사용하여 모든 데이터를 관리하고 더 크고 더 나은 웹 앱을 구축하는 방법을 알게 될 것입니다!

상태 관리를 위해 RxJS를 사용하는 이유는 무엇입니까?

안녕하세요, 대규모 웹 앱을 구축할 때 추적해야 할 정보가 너무 많아서 혼란스러울 때가 있나요? 이것이 바로 RxJS가 등장하는 곳입니다! 모든 데이터를 한 곳에서 관리하는 데 도움이 되는 정말 멋진 라이브러리와 같습니다.

RxJS를 사용하면 앱의 다양한 부분에서 사용할 수 있는 데이터 스트림을 만들 수 있습니다. 이는 앱을 통해 흐르는 강과 같아서 모든 것을 연결하고 동기화합니다.

RxJS는 또한 앱을 더 작은 조각으로 나누는 데 도움이 됩니다. 이는 마치 집에 다양한 물건을 보관할 수 있는 여러 방을 두는 것과 같습니다. 이렇게 하면 모든 것을 정리하고 필요한 것을 찾는 것이 더 쉬워집니다.

전반적으로 RxJS는 대규모 웹 앱의 데이터를 관리하기 위한 훌륭한 도구입니다. 간단한 앱을 구축하든 아주 큰 앱을 구축하든 RxJS는 모든 것을 제어하는 ​​데 도움이 될 수 있습니다!

할 일 목록 예시

새로운 기술이나 새로운 개념 증명을 적용하는 가장 쉬운 방법은 할 일 목록을 만드는 것입니다.

가게:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

이 코드는 RxJS를 사용하여 할 일 목록을 관리하기 위한 간단한 저장소를 정의합니다. 스토어는 주제를 사용하여 구현되며 작업을 추가, 제거 및 완료하는 방법을 제공합니다.

init 함수는 subject.next(state)를 사용하여 현재 상태를 주제에 게시하여 저장소를 초기화합니다. 이 함수는 일반적으로 스토어가 최신 상태인지 확인하기 위해 앱이 처음 로드될 때 호출됩니다.

구독 기능을 사용하면 구성 요소가 스토어의 변경 사항을 구독할 수 있습니다. 스토어가 업데이트되면 구독에 전달된 setState 함수가 업데이트된 상태로 호출됩니다. 이 기능은 일반적으로 저장소의 현재 상태를 표시해야 하는 구성 요소에서 사용됩니다.

전체적으로 init 및 subscribe는 개발자가 RxJS를 사용하여 할 일 목록의 상태를 관리할 수 있도록 하는 이 코드의 두 가지 중요한 기능입니다.

용법:

이런 종류의 상태 관리를 구현하는 것은 매우 쉽습니다. 가장 높은 수준에서 다음을 수행하세요.

const [tasks, setTasks] = useState([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

이 코드는 React 후크를 사용하여 RxJS를 사용하여 할 일 목록을 관리하는 스토어를 구독하고 초기화합니다.

useState 후크는 task라는 상태 변수와 해당 상태를 업데이트하기 위한 setTasks라는 함수를 생성합니다. useState에 전달된 [] 인수는 작업의 초기 값을 빈 배열로 설정합니다.

useEffect 후크는 todoStore를 구독하고 초기화하는 데 사용됩니다. todoStore.subscribe(setTasks) 라인은 setTasks 함수를 구독하여 스토어의 변경 사항을 구독합니다. 이는 스토어가 업데이트될 때마다 업데이트된 상태로 setTasks가 호출되고 이에 따라 작업이 업데이트된다는 의미입니다.

todoStore.init() 함수는 subject.next(state)를 사용하여 현재 상태를 주제에 게시하여 저장소를 초기화합니다.

결론

그렇습니다! 우리는 RxJS와 React를 사용하여 할 일 목록 애플리케이션을 구축하는 방법을 배웠습니다. 우리는 RxJS를 사용하여 애플리케이션 상태를 관리하고 React를 사용하여 현재 상태를 사용자에게 표시했습니다.

RxJS가 관찰 가능 항목, 연산자 및 주제를 포함하여 상태 관리를 위한 강력한 도구 세트를 제공하는 방법을 살펴보았습니다. 또한 useState 및 useEffect와 같은 React 후크를 사용하여 애플리케이션 상태를 실시간으로 업데이트하는 방법도 배웠습니다.

RxJS와 React를 함께 사용하여 사용 및 유지 관리가 쉬운 멋진 앱을 구축했습니다. 그리고 우리는 앞으로 훨씬 더 놀라운 웹 애플리케이션을 구축하는 데 사용할 수 있는 몇 가지 정말 귀중한 기술을 배웠습니다!

기사가 너무 모호하다고 생각되면 다음을 확인하세요.

• 소스 코드: https://github.com/starneit/rxjs-state-poc
• 데모: https://rxjs-poc.web.app/