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

이 목표를 달성하기 위해 우리는 react의 두 가지 다른 기능인 useImperativeHandle 및 forwardRef에 대해 알아야 합니다.
이 기능이 무엇인지 개별적으로 설명하지는 않겠습니다. 그룹으로 보는 것이 좋습니다.
useImperativeHandle 를 사용하면 동일한 구성 요소에서 forwarRef 를 사용할 때까지 코드가 작동하며 사용하지 않으면 이와 같은 오류가 표시됩니다.



이를 수행하는 방법에 대한 더 나은 설명을 위해 몇 가지 코드를 수행해 보겠습니다.

버튼이 필요하고 이 버튼은 사용자가 누르는 클릭 수를 저장해야 하지만 같은 페이지의 다른 버튼을 통해서만 이 정보에 액세스해야 하므로 기본적으로 이와 같은 것을 갖게 될 것입니다.



먼저 자식 구성 요소를 만듭니다.

import { forwardRef, useImperativeHandle, useState } from "react";
import PropTypes from "prop-types";

const CustomButton = forwardRef(
  ({ className, action = () => {}, children }, ref) => {
    const [count, setCount] = useState(0);

    // we are returning a function inside the ref
    // to returning the count of clicks
    useImperativeHandle(ref, () => ({
      getCount() {
        return count;
      },
    }));
    return (
      <button
        className={`button ${className}`}
        onClick={() => {
          setCount((count+= 1)); // we count the clicks
          action();
        }}
      >
        {children}
      </button>
    );
  }
);
// This line is because we get a warning
// When we use forwardRef we always have to have displayName
CustomButton.displayName = "Custom Button";

CustomButton.propTypes = {
  className: PropTypes.string.isRequired,
  action: PropTypes.func.isRequired,
};

export default CustomButton;

useImperativeHandle 함수에서 우리는 클릭 수를 반환하는 함수 호출getCount()을 반환하고 있지만 이제 이 구성 요소를 사용하는 방법이 궁금할 것입니다. 부모 구성 요소를 만들어 봅시다.

import { useRef } from "react";
import CustomButton from "../components/customButton";

export default function Example() {
  // we create a reference to the first button
  const button1 = useRef();

  // function of the first button
  const onClick = () => {
    console.log("do some action");
  };

  // function of the second button
  const onClick2 = () => {
    // we get the count with the reference of the first button
    console.log(ref.current.getCount());
  };

  return (
    <>
      <CustomButton ref={button1} action={onClick} className="is-success">
        Button 1
      </CustomButton>
      <CustomButton action={onClick2} className="is-danger mt-3">
        Get count of button 1
      </CustomButton>
    </>
  );
}

보시다시피 두 번째 버튼의 기능은 첫 번째 버튼의 카운트를 가져오지만 실행하고 몇 번의 클릭을 하고 콘솔을 봅니다.

콘솔에 버튼을 9번 눌렀다고 표시되었으니 이제 두 번째 버튼을 눌러보겠습니다.

우리는 성공적으로 금액을 얻습니다! 그러나 우리가 여전히 올바른 답을 얻는지 알아보기 위해 좀 더 해봅시다.

결론

우리는 우리가 했던 것처럼 함수나 객체, 문자열과 같은 자식 구성 요소에서 무엇이든 반환할 수 있습니다. 원하는 경우 DOM의 요소 또는 다른 참조를 반환할 수 있습니다. 이것의 힘은 매우 놀랍습니다.
자식에서 부모로 데이터를 전달하는 또 다른 접근 방식이 있지만 이것은 다른 게시물을 위한 것입니다...

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