[React] useImperativeHandle (forwardRef의 ref 커스터마이징)

useImperativeHandle

forwardRef를 사용할 때 ref로 넘어가는 메소드나 값들을 커스텀하고 싶은 경우가 있다.

이런 경우 <pre>useImperativeHandle</pre>을 사용하면 부모 A가 forwardRef 자식 B에 접근해서 여러 메소드나 값을 사용할 수 있게 할 수 있다.

 

파라미터

<pre>useImperativeHandle(ref, createHandle, dependencies?)</pre>

• ref
  • 필수
  • forwardRef의 두번째 인자로 넘어오는 ref이다.
• createHandle
  • 필수
  • 부모에서 ref.current 로 접근할 수 있는 핸들러를 리턴하는 함수이다.
  • 어떤 타입이든 넘길 수 있으나 주로 대게 메소드들을 담은 object를 넘긴다.
• dependencies
  • optional
  • 다른 상태 함수들에서 사용되는 것과 같은 종속되는 것들의 목록이다.
  • 예 : <pre>[dep1, dep2, dpe3]</pre>

 

Return

undefined를 반환한다.

 

사용 예시

자식에서도 ref를 사용하는 경우 ref의 모든 메소드들을 노출시키지 않고 필요한 것들만 노출시키고 싶은 경우

부모와 자식 모두 자식 내의 컴포넌트에 대한 ref가 필요한 경우

예 : 자식 안에 input A이 있고 자식 안에서도 A에 대한 ref가 필요하고 부모에서도 A에 대한 ref가 필요한 경우

필요한 메소드들을 생성해서 부모에서 접근시키고 싶은 경우

 

 

주의사항

useImperativeHandle을 사용할 때의 주의사항이라기보다는 ref 사용 시의 주의사항이다.

 

React 공식 문서에 따르면  ref는 react스러운 방법(the react way)이 아니고 DOM에 접근하기 위한 일종의 편법이기 때문에 가급적 사용하지 말라고 한다.

상태를 사용해서 관련된 컴포넌트를 리렌더링 시키는 것이 react way라고 한다.

 

특히 프롭스를 통해서 해결 가능한 것을 굳이 ref를 사용하지 말라고 한다.

 

사용 방법

아래처럼 <pre>useImperativeHandle</pre>의 두번째 인자로 부모에서 사용할 핸들러를 넘기면 된다.

import { forwardRef } from 'react';

const Component = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  
  useImperativeHandle(ref, () => {
    return {
      focus: () => {
        inputRef.current.focus()
      },
      value: inputRef.current.value,
    };
  }, []);

  return (
    <div>
      <label>예시</label>
      <input ref={inputRef} {...props} />;
    </div>
  );
});