[React] custom hook에서 ref 넘겨주기

일부 영역 외부를 클릭하면 닫히는 hook을 만들었다. 이 안에서 ref를 만들어 넘겨주려 한다.

const useOutsideClick = (options: { onClose: () => void }) => {
  const ref = useRef<HTMLElement>(null);

useRef의 타입을 무엇으로 할지 고민했는데, HTMLElement보다 포괄적인 DOM은 없었다. 문제는 ref를 div에 적용하면 에러가 뜬다는 것이다.

🚨 'RefObject' 형식은 'LegacyRef | undefined' 형식에 할당할 수 없습니다.

이럴 때는 as React.RefObject<HTMLDivElement>를 추가하면 된다. LegacyRef가 뭔진 모르겠는데 종종 보인다.

  const { ref } = useOutsideClick({ onClose: () => setShowItem(false) });
  
  return (
    <div
      ref={ref as React.RefObject<HTMLDivElement>}

참고 자료

• stackoverflow