useMergeRefs

인자로 주어진 여러 개의 ref를 하나로 병합할 때 활용할 수 있는 커스텀 훅입니다.

주어진 ref들을 병합하여 하나의 ref callback을 반환합니다. 반환된 ref callback을 컴포넌트에 전달하면, 해당 컴포넌트의 DOM 요소나 인스턴스가 제공된 모든 ref에 적용됩니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

function useMergeRefs<T = unknown>(...refs: React.Ref<T>[]): (instance: T | null) => void

Parameters

Name	Type	Description
...refs	React.Ref<T>[]	병합할 ref 목록

Usage

typescript

import React, { forwardRef, useRef } from 'react';
import { useMergeRefs } from '@modern-kit/react';

interface Props {
  /* ... */
}

const Example = forwardRef<HTMLDivElement, Props>((props, ref) => {
  const childRef = useRef<HTMLDivElement | null>(null);

  return <div ref={useMergeRefs(childRef, ref)}>{/* ... */}</div>;
});