useImperativeHandle

React의 커스텀 훅(hook) 중 하나로, 부모 컴포넌트에서 자식 컴포넌트의 함수 또는 값을 직접 호출하거나 사용할 수 있도록 해줍니다. 일반적으로 컴포넌트 간의 상호작용을 위해 props를 사용하지만, 때때로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접 참조해야 하는 경우가 있습니다. 이때 useImperativeHandle을 사용할 수 있습니다.

 

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const CustomInput = (props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} type="text" />;
};

const ForwardedCustomInput = forwardRef(CustomInput);

const ParentComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <button onClick={handleClick}>Focus on input</button>
      <ForwardedCustomInput ref={inputRef} />
    </div>
  );
};

export default ParentComponent;

 

코드 설명

 

CustomInput 컴포넌트는 forwardRef 를 사용하여 ref를 전달받을 수 있게 하고 있습니다.
ParentComponent는 inputRe를 통해 CustomInput 컴포넌트의 인스턴스를 참조하고, handleClick 함수에서 inputRef.current.focus()를 호출하여 자식 컴포넌트의  focus 함수를 실행합니다.
이를 통해 input에 포커스가 이동하게 됩니다.