forwardRef와 useImperativeHandle 오용

부모에서 inputRef.current.focus()를 호출하면 에러가 발생합니다. 버그를 찾으세요:

JSX

function CustomInput({ ref }) {
  const localRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => localRef.current.focus(),
    clear: () => { localRef.current.value = ''; },
  }));

  return <input ref={localRef} />;
}

function Form() {
  const inputRef = useRef(null);

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>포커스</button>
    </div>
  );
}

답변

localRef와 forwardRef를 동시에 쓸 수 없음 useImperativeHandle은 클래스 컴포넌트에서만 사용 가능 useRef(null) 대신 useRef()를 써야 함 ref는 일반 prop으로 전달되지 않으며 forwardRef로 감싸야 함

로그인 후 제출하기