forwardRef 관련 문제

[jgjgill]

React에서 ref 관련 타입으로 forwardRef 관련 문제를 내보려고 합니다.

저는 항상 접할 때마다 헷갈리는 부분이네요.. 😇

function forwardRef<T, P = {}>(render: ForwardRefRenderFunction<T, P>): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>

여기서 T, P의 위치가 사용할 때는 앞뒤가 바뀝니다.

• PropsWithoutRef<P>는 P로 처음 위치하며 ref를 제외한 props 타입을 받는다.
• RefAttributes<T>는 T로 마지막에 위치하며 ref 타입을 받는다.

Input 사용 예시

forwardRef를 사용한 예시로 보면 2가지로 살펴볼 수 있습니다.

import { Ref, forwardRef } from 'react'

type InputProps = {
  onChnage: () => void
}

const Input1 = forwardRef(function (props: InputProps, ref: Ref<HTMLInputElement>) {
  return <input {...props} ref={ref} type="text" />
})

const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => (
  <input ref={ref} {...props} type="text" />
))

export { Input1, Input2 }

문제 예시

종길이는 팀원들을 위해 Input 공통 컴포넌트를 만들었다.
하지만 ref를 생각하지 못해서 에러를 마주했고 리팩토링에 들어간다.
어떤 방식으로 만들지 고민하게 되는데...

import { Ref, forwardRef } from 'react'

type InputProps = {
  onChnage: () => void
}

const Input1 = forwardRef(function (props: {/* A */}, ref: {/* B */}) {
  return <input {...props} ref={ref} type="text" >
})

const Input2 = forwardRef<{/* C */}, {/* D */}>((props, ref) => (
  <input ref={ref} {...props} type="text" />
))

export { Input1, Input2 }

1. A: InputProps, B: HTMLInputElement, C: HTMLInputElement, D: InputProps
2. A: InputProps, B: HTMLInputElement, C: InputProps, D: HTMLInputElement
3. A: InputProps, B: Ref<HTMLInputElement>, C: HTMLInputElement, D: InputProps
4. A: InputProps, B: Ref<HTMLInputElement>, C: InputProps, D: HTMLInputElement

정답

3번