forwardRef를 이용해 ref를 다는데... 타입은 어떻게 함?

forwardRef

React가 제공하는 forwardRef는 ref를 prop으로 넘겨서

부모 컴포넌트에서 정의한 ref를 자식 컴포넌트에서 사용하게 해주는 함수입니다.

왜 사용해야하는지는 그냥 ref를 props로 넘겨서 사용해보면 알게됩니다.

잘 동작하지 않아요..

 

그렇지만 forwardRef가 제공하는 기능이 필요한 상황은 꽤 자주 존재합니다.

가장 흔한 예를 들면 인풋의 스타일을 통일시켜서 사용하기 때문에

스타일이 정해진 input 컴포넌트를 만들어서 재사용하고 있는 상황에서

form내부의 input 관리를 위해 ref를 달아주고 싶다고 가정해보면

컴포넌트에 ref를 넘겨주고 싶은 마음이 생기게됩니다.

 

그것을 위해서 forwardRef를 사용할 수 있습니다.

---

이런식으로

import React, {
  forwardRef,
  Ref,
  ComponentPropsWithRef,
} from 'react';

interface InputProps extends ComponentPropsWithRef<'input'> {}

const Input = ({ ...attributes }: InputProps, ref: Ref<HTMLInputElement>) => {
  return <input type="text" {...attributes} ref={ref} />;
};

export default forwardRef(Input);

재사용할 수 있도록 input을 만들어주었습니다.

ref는 props에 포함되지 않고 2번째 매개변수로 주어지기때문에

props, ref 형태로 받게됩니다.

ref의 타입은 리액트가 제공하는 Ref 타입을 이용할 수 있습니다.

내보내기해줄때 forwardRef로 작성한 컴포넌트를 감싸주면 됩니다.

'use client';
import React, { useRef } from 'react';
import { useForm } from 'react-hook-form';
import Input from './Input';

interface RefFormProps {}

const RefForm = ({}: RefFormProps) => {
  const {} = useForm();
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <div>
      <form action="">
        <Input ref={inputRef} />
      </form>
      <button onClick={() => console.log(inputRef.current)}>확인해보기</button>
    </div>
  );
};

export default RefForm;

이제 잘 동작하는지 import해서 실험해보겠습니다.

잘 동작하고 attributes들의 자동완성과 적용도 잘 되는것을 확인할 수 있습니다.

직접 실습해보세요!