useMergedRef

useMergedRef (Ref 병합)

useMergedRef 훅은 여러 ref를 하나의 콜백 ref로 병합해요. 여러 ref 기반 훅을 같은 요소에 함께 사용할 때 유용해요.

출처: 문서

본문

mergeRefs는 useMergedRef와 같은 방식으로 동작하지만 내부적으로 훅을 사용하지 않아요. useMergedRef를 사용할 수 없을 때만 사용하세요. mergeRefs는 useFocusTrap 훅과 올바르게 동작하지 않으므로, 그것과 함께 쓸 때는 반드시 useMergedRef를 사용해야 해요.

assignRef 함수

assignRef 함수는 useCallback으로 메모이즈되지 않은 ref를 할당할 때 사용할 수 있어요. 보통 요소를 참조하지 않는 ref를 할당할 때 쓰여요.

import { useState } from 'react';
import { assignRef } from '@mantine/hooks';

interface NumberInputHandlers {
  increment: () => void;
  decrement: () => void;
}

interface DemoProps {
  handlersRef?: React.ForwardedRef<NumberInputHandlers>;
}

function Demo({ handlersRef }: DemoProps) {
  const [value, setValue] = useState(0);

  const increment = () => setValue((v) => v + 1);
  const decrement = () => setValue((v) => v - 1);

  assignRef(handlersRef, { increment, decrement });

  return (
    <>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </>
  );
}

노드 타입 설정 (Set node type)

import { useMergedRef } from '@mantine/hooks';

const ref = useMergedRef<HTMLDivElement>(ref1, ref2);

정의 (Definition)

function useMergedRef<T = any>(
  ...refs: React.ForwardedRef<T>[]
): (node: T) => void;

더 알아보기 (Learn more)