리액트 ref를 prop 으로 넘기기(feat. 타입스크립트)

첫 번째 에러

문제 상황

🚧 문제 상황
부모 컴포넌트에서 특정 요소를 useRef() 훅을 사용해 지정하고,
해당 요소를 자식 컴포넌트로 전달하는 과정

개인 프로젝트를 진행하면서 자식 컴포넌트에 부모 컴포넌트의 특정 요소를 전달해야 할 일이 있었습니다.
그래서 전달받을 prop을 지정하고 해당 요소를 넘겼는데...
자식 컴포넌트에서 전달받은 요소를 null로 인식하는 문제가 발생했습니다.
문제의 원인은 일반적인 prop 전달 방식으로는 element 요소를 컴포넌트 간 전달할 수 없기 때문이었습니다.

해결

컴포넌트 끼리 element 요소를 주고 받기 위해서는 forwardRef() 함수를 사용해야 합니다.
타입스크립트를 사용한 프로젝트를 진행하고 있기 때문에 forwardRef 함수 관련해서 타입을 지정해야 했습니다.

• 첫 번째 제네릭 타입: 전달받는 컴포넌트의 Element 타입
• 두 번째 제네릭 타입: 전달받을 props의 타입

// ✅ Signin.tsx

type SigninProps = {
  handleUser: React.Dispatch<React.SetStateAction<string | null>>;
};

const Signin = forwardRef<HTMLDialogElement, SigninProps>(
  ({ handleUser }, ref) => {
    ... 💻 MORE CODES ...

    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
      ... 💻 MORE CODES ...
      
      try {
        ... 💻 MORE CODES ...
        (ref as MutableRefObject<HTMLDialogElement>).current.close();
      } catch (error) {
        ... 💻 MORE CODES ...
      }
    };

    const handleClose = (
      event: React.MouseEvent<HTMLDivElement, MouseEvent>
    ) => {
      ... 💻 MORE CODES ...
    
      (ref as MutableRefObject<HTMLDialogElement>).current.close();
    };

    return (
      ... 💻 MORE CODES ...
    );
  }
);

두 번째 에러

문제 상황

첫 번째 에러에 이어서 발생했습니다.
전달받은 요소(ref)에 대해서 current 값을 불러올 수 없었습니다.

해결

문제의 원인은 두 종류(ref objects 그리고 ref callback)의 ref가 존재하기 때문이었습니다.
따라서 ref objects 타입으로 전달받은 ref의 타입을 지정함으로써 문제를 해결했습니다.

...
(ref as MutableRefObject<HTMLDialogElement>).current.close();
...

📝 참고

첫 번째 에러

• https://www.carlrippon.com/react-forwardref-typescript/
• https://fettblog.eu/typescript-react-generic-forward-refs/
• https://dori-coding.tistory.com/entry/React-ref%EB%A5%BC-prop%EC%9C%BC%EB%A1%9C-%EB%84%98%EA%B8%B0%EA%B8%B0-forwardRef

두 번째 에러

• https://stackoverflow.com/questions/65876809/property-current-does-not-exist-on-type-instance-htmldivelement-null