부모 컴포넌트에서 자식 컴포넌트 함수 실행하기

자식 컴포넌트에서 부모 컴포넌트의 함수를 실행하려면 props로 함수를 넘겨주면 된다. 역방향은 불가능한가 싶어서 찾아봤더니 방법이 있었다.

부모 컴포넌트에서 자식 컴포넌트의 함수를 실행하기 위해선 React.forwardRef와 useImperativeHandle을 사용해야 한다.

// Child.jsx
import { forwardRef, useImperativeHandle } from "react";

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    testFn: () => {
      alert("함수 실행됨");
    }
  }));

  return <div>Child</div>;
});

export default Child;

이렇게 자식 컴포넌트에서 useImperativeHandle과 forwardRef를 사용해 ref를 만들면

// Parent.jsx
import { useRef } from "react";
import Child from "./Child";

const Parent = () => {
  const childRef = useRef();

  return (
    <button
      onClick={() => childRef.current.testFn()}
    >
      함수 실행
    </button>
    <Child ref={childRef}></Child>
  );
}

export default Parent;

요렇게 부모 컴포넌트에서 ref를 받아다가 사용할 수 있다.

방법도 복잡하고 리액트에서도 권장하는 패턴은 아닌 듯하다. 하긴 지금 생각해보면 useEffect로 props의 변화에 따라 함수를 실행시키는 방법으로도 충분할 거 같긴 하다.