Portfolio

소개

forwardRef를 통해 ref를 사용하는 부모 컴포넌트 측에서

커스터마이징된 메서드를 사용할 수 있게 해 주는 훅이다.

useImperativeHandle(ref, createHandle, [deps])

첫 번째 인자는 프로퍼티를 부여할 ref이고, 두 번째 인자는 객체를 리턴하는 함수이다.

이 객체에 추가하고 싶은 프로퍼티 & 메서드를 정의하면 된다.

예제


import Input from "./components/Input";
import { InputElement } from "./components/Input";

const App = () => {
  // inputRef라는 동아줄을 만들어서 자식에게 보낸다. 
  const inputRef = useRef<InputElement>(null);

  const handleClickFocus = useCallback(() => {
    inputRef.current?.focus();
  }, []);

  const handleClickClear = useCallback(() => {
    if (inputRef.current) {
      inputRef.current?.clear();
    }
  }, []);

  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={handleClickFocus}>Focus</button>
      <button onClick={handleClickClear}>Clear</button>
    </div>
  );
};

export default App;


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

export interface InputElement extends HTMLInputElement {
  clear(): void;
}

/*
  부모가 내려준 ref에다가 이것 저것 작업을 한다. 
  부모는 이 로직에 대해 구체적으로 몰라도, 그냥 ref.current로 접근하여 사용하면 된다. 
*/
const Input = forwardRef((_, ref) => {
  const inputRef = useRef<InputElement>(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) {
        inputRef.current.value = "";
      }
    },
  }));
  return (
    <>
      Input: <input ref={inputRef} />
    </>
  );
});

export default Input;

input 엘리먼트에는 clear라는 메서드가 없지만,

useImperativeHandle에서 정의했으므로 사용할 수 있다.