ForwardRef()

리액트의 자식 컴포넌트에게 prop 을 통해 ref를 넘겨서 자식 컴포넌트의 ref 값을 부모 엘리먼트에서 읽는 것을 가능하게 하는 기능입니다.

// 부모 엘리먼트
const MealItemForm = (props) => {
  const amountInputRef = useRef();
  ...
  ...
  ...
  return (
    <form className={classes.form} onSubmit={submitHandler}>
      <Input
        ref={amountInputRef}
        label="Amount"
        input={{
          id: "amount_" + props.id,
          type: "number",
          min: "1",
          max: "5",
          step: "1",
          defaultValue: "1",
        }}
      />
      <button>+ Add</button>
      {!amountIsValid && <p>Please enter a valid amount. (1-5)</p>}
    </form>
  );
};
       
 // 자식 엘리먼트
 const Input = React.forwardRef((props, ref) => {
  return (
    <div className={classes.input}>
      <label htmlFor={props.input.id}>{props.label}</label>
      <input ref={ref} {...props.input} />
    </div>
  );
});

export default Input;

useRef() 는 뭐였지?

기존 state를 통한 데이터 전송방식과는 별개로, 리액트 내에서 DOM API에 직접 접근하여 값을 가져오는 기능을 하는 것이 useRef() 였습니다. 데이터의 보안적인 측면을 위해 데이터에 간섭할 때마다, 일일이 읽기와 변경을 함께 해주어야 하는 state 와는 달리, 간편하게 직관적으로 값을 읽어올 수 있습니다. 데이터의 변경과정을 알 필요가 없고, 주어져 있는 값만 잘 읽어 올 수 있다면 useRef() 는 useState() 의 좋은 대안이 될 수 있죠.

참고 : https://velog.io/@beberiche/React-fragments-portals-refs