mergeRefs

이 함수는 여러 개의 refs(RefObject 또는 RefCallback)를 받아서 제공된 모든 refs를 업데이트하는 단일 ref를 반환해요. 단일 요소에 여러 refs를 전달해야 할 때 유용해요. 콜백 ref가 정리 함수를 반환하면(React 19) 합쳐진 ref도 정리 함수를 반환하고, 분리될 때 모든 정리 함수를 실행해요.

인터페이스

function mergeRefs<T>(
  ...refs: Array<RefObject<T> | RefCallback<T> | null | undefined>
): RefCallback<T>;

파라미터

• refsrequired · Array<RefObject<T> | RefCallback<T> | null | undefined>
  

  합쳐질 refs의 배열이에요. 각 ref는 RefObject 또는 RefCallback 중 하나일 수 있어요.

반환 값

• RefCallback<T>
  

  제공된 모든 refs를 업데이트하는 단일 ref 콜백이에요.

예시

forwardRef(function Component(props, parentRef) {
  const myRef = useRef(null);

  return <div ref={mergeRefs(myRef, parentRef)} />;
});

function Component(props) {
  const ref = useRef(null);
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node == null) {
      return;
    }

    setHeight(node.offsetHeight);
  }, []);

  return <div ref={mergeRefs(measuredRef, ref)} />;
}