React forwardRef

1. forwardRefとは？

forwardRef を使うと、コンポーネントがその子要素の1つにリファレンス（Ref）を渡せるようになります。これは、コンポーネント内部にあるDOM要素への「直送便」を作るようなものです。

forwardRef の一般的な用途は以下の通りです：

• インプット要素へのフォーカス
• アニメーションのトリガー
• DOM要素のサイズ計測
• サードパーティ製ライブラリとの統合

2. 基本的な使用例

以下は、Refをインプット（input）要素へ転送（フォワード）するシンプルな例です。

import { forwardRef, useRef } from 'react';

// forwardRefでコンポーネントをラップする
const MyInput = forwardRef((props, ref) => (
  // 第二引数のrefを目的のDOM要素に渡す
  <input ref={ref} {...props} />
));

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

  const focusInput = () => {
    // inputRef.currentを通じて子コンポーネントのinputを直接操作
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput ref={inputRef} placeholder="ここに入力..." />
      <button onClick={focusInput}>インプットにフォーカス</button>
    </div>
  );
}

2.1 実装のポイント

この例では以下の処理が行われています：

1. MyInput コンポーネントを forwardRef でラップしています。
2. コンポーネントは第二引数として ref を受け取ります。
3. 親コンポーネント（App）が、子コンポーネント内のインプット要素を直接制御できるようになります。

       注意：forwardRef は、DOM要素への直接的なアクセスがどうしても必要な場合にのみ使用してください。ほとんどのケースでは、代わりにプロップス（props）やステート（state）を用いた宣言的な設計で解決できます。