useImperativeHandle

forwardRef 를 사용해서 ref를 사용하는 부모 컴포넌트가 자식컴포넌트에서 커스텀하게 추가된 메서드를 이용하기 위한 커스텀 훅입니다.

// parent component
import { useRef } from "react";
import ChildImperativeComponent from "./ChildImperativeComponent";

function ImperativeComponent() {
  const childCompoRef = useRef();
  const onClick = () => {
    if (childCompoRef.current) {
      console.log(
        "current name length:",
        childCompoRef.current.getNameLength()
      );
      childCompoRef.current.addAge();
    }
  };
  return (
    <div>
      <ChildImperativeComponent ref={childCompoRef} />
      <button onClick={onClick}>add age</button>
    </div>
  );
}

export default ImperativeComponent;

// children component
import React, { useState, useImperativeHandle, forwardRef } from "react";

// props와 ref를 인자로 받음
function ChildImperativeComponent(props, ref) {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  // 1번인자 : ref
  // 2번인자 : 현재 컴포의 값을 부모컴포가 접근할수 있는 CB함수를 전달
  useImperativeHandle(ref, () => ({
    addAge: () => setAge(age + 1),
    getNameLength: () => name.length
  }));

  return (
    <div>
      <p>{`name is ${name}`}</p>
      <p>{`age is ${age}`}</p>
    </div>
  );
}
// 여기서 forwardRef를 씌워줌으로 ref 매개변수를 사용할수 있게됨
// 부모컴포넌트에서 useRef()를 사용하고 자식의 useImprerativeHandle에 전달한 객체를 사용해 값 수정 가능
export default forwardRef(ChildImperativeComponent);

https://codesandbox.io/s/late-breeze-gtinq0?file=/src/ImperativeHandle/ChildImperativeComponent.jsx:286-305