mergeRefs

여러 개의 Ref를 하나로 병합하여 반환하는 유틸리티 함수입니다. 하나의 요소에 여러 개의 Ref를 연결해야 할 때 유용합니다.

Interface

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

Parameters

이름	타입	설명	필수
refs	Array<RefObject<T> | RefCallback<T> | null | undefined>	병합할 Ref들의 목록. RefObject(객체), RefCallback(함수), null 또는 undefined일 수 있음	O

Return

RefCallback<T> - 전달받은 모든 Ref를 순차적으로 업데이트하는 단일 콜백 Ref 함수를 반환합니다.

이름	타입	설명
-	RefCallback<T>	모든 Ref를 업데이트하는 단일 콜백 Ref 함수

Usage

import { forwardRef, useRef } from 'react';
import { mergeRefs } from '@teamsparta/react';

const MyInput = forwardRef(function MyInput(props, parentRef) {
  const internalRef = useRef(null);

  return <input ref={mergeRefs(internalRef, parentRef)} />;
});

Example

forwardRef와 내부 ref를 함께 사용

외부에서 전달받은 ref와 컴포넌트 내부에서 사용하는 ref를 동시에 연결해야 할 때 사용합니다.

import { forwardRef, useRef, useEffect } from 'react';
import { mergeRefs } from '@teamsparta/react';

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    // 외부에서도 ref를 사용하여 값에 접근
    console.log(inputRef.current?.value);
  };

  return (
    <div>
      <FocusableInput ref={inputRef} />
      <button onClick={handleClick}>값 확인</button>
    </div>
  );
}

const FocusableInput = forwardRef(function FocusableInput(props, parentRef) {
  const internalRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    // 내부적으로 ref를 사용하여 포커스 처리
    internalRef.current?.focus();
  }, []);

  return <input ref={mergeRefs(internalRef, parentRef)} {...props} />;
});

Callback Ref와 Object Ref를 함께 사용

DOM 요소의 크기를 측정하는 Callback Ref와 일반 Object Ref를 동시에 사용해야 할 때 유용합니다.

import { useRef, useCallback } from 'react';
import { mergeRefs } from '@teamsparta/react';

function MeasuredComponent() {
  const elementRef = useRef<HTMLDivElement>(null);

  const measureRef = useCallback((node: HTMLDivElement | null) => {
    if (node) {
      console.log('요소 높이:', node.offsetHeight);
      console.log('요소 너비:', node.offsetWidth);
    }
  }, []);

  return <div ref={mergeRefs(elementRef, measureRef)}>측정되는 요소</div>;
}