forwardRef()

부모 컴포넌트에서 생성한 ref를 자식 컴포넌트로 전달해주는 역할.

리액트가 제공하는 기본 컴포넌트인 <input>은 ref 속성에 값을 설정할 수 있지만,사용자 컴포넌트의 경우 ref 속성을 forwardRef 함수로 전달해야함.

forwardRef 함수 타입

function forwardRef<T,P ={}>(rend: ForwardRefRenderFunction<T,P>): 반환_타입;

타입변수 T 는 ref대상 컴포넌트( 예) input 타입은 <HTMLInputElement>)

속성 타입 P는 아래 InputProps

export type reactInputProps = DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>;

export type InputProps = reactInputProps & {};

input 사용자 컴포넌트 forwardRef 사용

import type { FC, DetailedHTMLProps, InputHTMLAttributes } from 'react'
import { forwardRef } from 'react'

export type reactInputProps = DetailedHTMLProps<
  InputHTMLAttributes<HTMLInputElement>,
  HTMLInputElement
>

export type InputProps = reactInputProps & {}

export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  const { className: _className, ...inputProps } = props
  const className = ['input', _className].join(' ')
  return <input ref={ref} {...inputProps} className={className} />
})