[react/typescript] 하나의(single) html 엘리먼트(element)에 2개 이상의(multiple) ref 를 바인딩 하는 샘플 (useRef)

By itpsolver | 2월 13, 2023

  <input
    ...
    ref={(el) => {
      refA(el); // (1) react-hook-form > controller가 주는 ref
      (refB as MutableRefObject<HTMLInputElement | null>).current = el; // (2) imask의 useIMask가 주는 ref
    }}
    ...
  />

참고

처음 찾아본 문서에는 (1)의 방식만 소개되어 있어서 일괄 적용해 봤더니 refA는 정상 적용되고, refB는 '함수가 아닙니다' 류의 오류가 발생.
좀 더 찾아보니 위에 기록한 (2) 형태의 예제가 있어서 적용해 보니 성공했다. 개꿀!
(2)의 MutableRefObject... 구문은 'refB가 reaonly' 라는 에러때문에 장황하게 추가해 준 것임
다른 ref 바인딩 사례
- ToastEditor ~ react-hook-form