forwardRef

forwardRef
React 19 버전부터 Deprecated
React에서 특수한 목적으로 사용되기 때문에 일반적인 용도로 사용할 수 없는 prop이 몇 가지 있다.
- 대표적인 예로 루프를 돌면서 동일한 component를 여러 번 랜더링 할 때 사용하는 key prop을 들 수 있다. ref prop도 마찬가지로 HTML 엘리먼트 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용을 할 수 없다.
HTML 엘리먼트가 아닌 React component에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 한다.
React component를 forwardRef라는 함수로 감싸주면, 해당 component는 함수를 두 번째 매개 변수로 갖게 되는데, 이를 통해 외부에서 ref prop을 넘길 수 있다.
이 hook은 function component에서만 선언해서 사용할 수가 있다. 이 hook을 사용하기 위해서는 child component에서는 ref를 props로 전달 받아야 한다. 그런데 function component에서는 ref를 props로 전달 받지 못한다고 하는데 어떻게 전달 받을 수 있을까? ref를 전달 받는 child component에서 React.forwardRef를 사용하면 받을 수 있다. forwardRef는 상위 component에서 전달 받은 ref를 하위 component로 전달하는 역할을 맡는다. 이 함수는 React.ReactNode 타입을 반환하기 때문에 일반 function component와 동일하게 JSX 문법을 써서 렌더링 할 수 있다.

forwardRef - 예시

예시 1

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

const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

function Field() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <>
      <Input ref={inputRef} />
      <button onClick={handleFocus}>입력란 포커스</button>
    </>
  );
}

예시 2

import React from "react";

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;