rxjs와 반응하여 하위 구성 요소에서 상위 구성 요소로 데이터를 보내는 방법은 무엇입니까?

내 마지막 글을 읽었다면(읽지 않았다면 내가 말하는 내용을 알기 위해 그것을 읽을 것을 강력히 권장합니다) 아마도 자식 구성 요소에서 부모 구성 요소로 데이터를 보내는 방법을 알고 있을 것입니다. 하지만 이번에는 보여 드리겠습니다. rxjs라는 환상적인 라이브러리를 사용하여 다른 방식으로 수행하는 방법은 documentation에서 이 라이브러리에 대한 자세한 내용을 읽고 사용 방법을 배울 수 있습니다.

오늘 포스트에서는 목표를 달성하기 위해 이 라이브러리를 약간 사용하는 방법을 보여드리겠습니다.

먼저 분명히 합시다. 이 라이브러리는 반응형 프로그래밍을 사용하고 있습니다. 이것이 무엇인지 모른다면 간단히 말해서 반응형 프로그래밍은 Observer Pattern , Iterator Pattern 및 함수형 프로그래밍의 최고의 아이디어를 조합한 것입니다.

이제 문제를 정의해 봅시다.
사용자가 클릭한 횟수를 표시하는 버튼이 필요하지만 상위 구성 요소에서도 클릭 횟수를 표시해야 합니다. 다음과 같이 진행됩니다.


어떻게 할 수 있습니까?
알아보기 위해 코딩해 봅시다.

하위 구성요소

import { useEffect, useState } from "react";
import { Subject } from "rxjs";

// we create and export the observable;
// note the $ character at the end;
// this is the convention for observable variables
export const countObserver$ = new Subject();
export default function CustomButton({
  className,
  action = () => {},
  children,
}) {
  const [count, setCount] = useState(0); 

  useEffect(() => {
    // send [count] in our observable
    countObserver$.next(count); 
  }, [count]);// check all the changes of [count]

  return (
    <button
      className={`button ${className}`}
      onClick={() => {
        setCount(count += 1); // we count the clicks
        action();
      }}
    >
      {children} clicks: {count}
    </button>
  );
}

상위 구성요소

import { useEffect, useState } from "react";
import CustomButton, { countObserver$ } from "../components/customButton";

export default function Example() {
  // we create the same variable as the children component
  const [count, setCount] = useState(0);

  useEffect(() => {
    // subscribe the observable, this function returns 
    // the count that is changing in the child component
    countObserver$.subscribe(setCount);
  }, []);

  const onClick = () => {
    console.log("do some action");
  };

  return (
    <div className="is-flex is-flex-direction-column is-align-self-flex-end">
      <CustomButton action={onClick} className="is-success mb-3">
        Button
      </CustomButton>
      <label className="label">Clicks: {count}</label>
    </div>
  );
}

그리고 마지막으로 우리는 다음과 같은 것을 갖게 될 것입니다:

결론

이 접근 방식을 통해 우리는 rxjs가 할 수 있는 일을 조금 볼 수 있습니다. 이 라이브러리에 대해 더 알고 싶다면 저에게 알려주세요. 다른 예제와 함께 이에 대해 더 게시하겠습니다.
예를 들어 카운트 변수에 10을 곱해야 하는 경우 내부에 pipe 함수가 있는 map를 프로그래밍하고 데이터를 곱하는 것만 큼 간단합니다.

countObserver$.pipe(map((data) => data * 10)).subscribe(setCount);

읽어주셔서 감사하고 필요한 사항이 있으시면 언제든지 연락주세요.