[React] forwardRef란?

 

❓React forwardRef란 ?

1. ref를 부모에서 자식으로 전달하기 위해 쓰이는 함수
2. "부모가 자식 내부의 DOM이나 컴포넌트 인스턴스를 직접 제어할 수 있게 해주는 기능"

function Input() {
    return <input type="text" />
}

function App() {
    const inputRef = useRef<HTMLInputElement>(null)

    return <Input ref={inputRef} />
}

• Input은 그냥 일반 함수 컴포넌트라서 ref를 바로 받을 수 없다.
• React는 ref를 기본적으로 DOM 요소에만 전달하기 때문이다.

 

예시) forwardRef로 감싸서 ref 전달 허용하기

const Input = React.forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<'input'>>(
  (props, ref) => {
    return <input ref={ref} {...props} />
  }
)

function App() {
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>포커스!</button>
    </>
  )
}

• 부모가 자식 컴포넌트 내부의 input DOM에 접근할 수 있다. 즉, ref가 App → Input 내부 DOM으로 "forward"된 것이다.
  • forwardRef: ref를 자식 내부로 전달할 수 있게 만드는 React 함수
  • ref: 특정 DOM 요소나 컴포넌트 인스턴스를 직접 가리킴
  • 사용목적: 부모에서 자식 DOM 조작

 

---

 

이런 코드는 안될까 ❓

function Input({ref}) {
    return <input type="text" ref={ref} />
}



function App() {
    const inputRef = useRef<HTMLInputElement>(null)

    return <Input ref={inputRef} />
}

• 결론은 ❌
• function Input({ref})는 작동하지 않는다. 왜냐하면 ref는 props가 아니라 React가 특별하게 처리하는 예약속성이기 때문이다.
• React에서 ref는 props처럼 전달되지 않는다.
  •  ref는 React가 내부적으로 특별 취급하는 속성이기 때문에, 일반 함수형 컴포넌트에서는 자동으로 props 안으로 들어가지 않는다. 
• 이런 코드를 작성한다면 ref는 항상 undefined이다.