useImperativeHandle 사용법

useImperativeHandle

useImperativeHandle를 사용하면 forwardRef로 넘긴 요소에 메서드를 커스텀하여 핸들링 할 수 있다.

 

먼저 forwardRef 예제를 작성했다.

제네릭에 각 메소드와 프롭스의 인터페이스를 작성하면 부모 요소에서 정상적으로 접근 가능하다.

(미리 지정해주지않으면 해당 메서드의 존재여부를 보장할 수 없기때문에 번거로워졌었다.)

interface ChildMethods {
  usingFocus: () => void;
  valueCheck: () => void;
}

interface ChildProps {
  // ...
}

const MyInput = forwardRef<ChildMethods, ChildProps>(function MyInput(
  props,
  ref,
) {
  const inputRef = useRef<HTMLInputElement>(null);
  useImperativeHandle(
    ref,
    () => {
      return {
        //커스텀메서드 작성. 부모 요소에서 ref.current.usingFocus()로 호출 가능하다. 
        usingFocus() {
          if (inputRef.current !== null) {
            console.log(ref);
            inputRef.current.focus();
          }
        },
        valueCheck() {
          if (inputRef.current !== null) {
            alert(inputRef.current.value);
          }
        },
      };
    },
    [],
  );

  return <input {...props} ref={inputRef} />;
});

 

부모 요소에서 아까 useImperativeHandle에 작성한 커스텀 메서드에 접근할 수 있다.

이때 부모 요소에서 쓰이는 ref의 타입은 아까 작성한 ChildMethods 인터페이스를 사용하면 오류가 나지않는다.

function App() {
  const ref = useRef<ChildMethods>(null);

  return (
    <div className='App'>
      <MyInput ref={ref} />
      <button
        onClick={() => {
          if (ref.current !== null) {
            ref.current.usingFocus();
          }
        }}
      >
        usingFocus 버튼
      </button>
      <button
        onClick={() => {
          if (ref.current !== null) {
            ref.current.valueCheck();
          }
        }}
      >
        valueCheck 버튼
      </button>
    </div>
  );
}

 

의존성 배열

useImperativeHandle의 의존성 배열을 빈 배열로 전달하면

콜백 함수가 마운트 시 한번만 실행되고, 그 후 반환된 객체를 재사용 한다.

따라서 반환 객체가 참조하는 상태나 함수가 업데이트될 가능성이 없을 때에만 빈 배열을 사용하는것을 추천한다고 한다.