[React] forwardRef

forwarding Refs

• Component를 통해 ref를 자식 중 하나로 자동으로 전달
• 일부 재사용 가능한 Component 라이브러리에 유용할 수 있음

// src/components/MyInput.jsx

import React from "react";

export default React.forwardRef(function MyInput(props, ref) {
  return (
    <div>
      <p>MyInput</p>
      <input ref={ref} />
    </div>
  );
});

// src/App.js

import "./App.css";
import { useRef } from "react";
import MyInput from "./components/MyInput";

function App() {
  const myInputRef = useRef();

  const click = () => {
    console.log(myInputRef.current.value);
  };

  return (
    <div>
      <MyInput ref={myInputRef} />
      <button onClick={click}>send</button>
    </div>
  );
}

export default App;