[React] 리액트 ref를 prop으로 전달하기 - forwardRef()

DOM 조작을 위한 ref 전달

리액트에서 ref를 가장 많이 사용하는 경우는 바로 DOM 엘리먼트를 참조하는 것입니다.
하지만 이 ref를 prop를 전달하는 경우, 일반적인 방법으로 되지 않습니다.

import React, { useRef } from "react";

const MyInput = ({ ref }) => {
  return <input type='text' ref={ref} />
}

const MyApp = () => {
  const inputref = useRef(null)
  return (
    <MyInput ref={inputref} />
  )
}

export default MyApp

위의 코드처럼 ref를 전달하게 되면 경고 메시지가 뜨게 됩니다.

Warning: Input: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.

바로 ref가 일종의 예약어이기 때문입니다.
리액트에서 class 대신에 className을 사용하는 경우처럼 말입니다.
그럼 어떤 방식으로 prop으로 전달 해야 하는지 알아보겠습니다.

1. ref가 아닌 inputRef 속성으로 전달

ref가 예약어이기 때문에 다른 이름으로 전달을 하는 것입니다.

import React, { useRef } from "react";

const MyInput = ({ inputRef }) => {
  return <input type='text' ref={inputRef} />
}

const MyApp = () => {
  const inputref = useRef(null)

  return (
    <MyInput inputRef={inputref} />
  )
}

ref가 아닌 다른 이름으로 전달하면 DOM 엘리먼트에 접근할 수 있습니다.
하지만 이러한 방식이 좋은 방법이라고는 생각하지 않습니다.
같은 역할을 하고는 있지만, 결국에는 DOM 엘리먼트에 접근하기 위해서는 ref가 아닌 다른 이름으로 계속해서 전달해야하고,
이러한 전달은 일관적으로 보이지 않을 수 있습니다.

2. forwardRef()

제가 권장하는 방법은 forwardRef() 함수를 이용하는 것입니다.
ref 그대로 전달하기 위해서는 forwardRef를 이용해서 컴포넌트를 한번 감싸주면 됩니다.
forwardRef 함수에 매개변수로 리액트 컴포넌트를 넣으면, 2번째 매개변수로 부모로부터 전달되는 ref 속성이 전달됩니다.

import React, { useRef, forwardRef } from "react";

const MyInput = forwardRef((props, ref) => {
  return <input type='text' ref={ref} />
})

const MyApp = () => {
  const inputref = useRef(null)

  return (
    <MyInput ref={inputref} />
  )
}

참고

React.forwardRef
[React] ref를 prop으로 넘기기 - forwardRef()
React 컴포넌트에 ref props 전달하기 (feat. forwardRef, useImperativeHandle)