関数コンポーネントでのrefの使用方法

まず、refを使用するためには、ReactのuseRefフックをインポートする必要があります。以下のようにコードを書いて、useRefを使います。

import React, { useRef } from 'react';
function MyComponent() {
  const myRef = useRef();
  // refを使用する例
  const handleClick = () => {
    myRef.current.focus();
  };
  return (
    <div>
      <input ref={myRef} type="text" />
      <button onClick={handleClick}>フォーカスする</button>
    </div>
  );
}

上記の例では、useRefフックを使ってmyRefというrefオブジェクトを作成しています。そして、input要素にref={myRef}というpropsを渡すことで、myRef.currentを使ってinput要素にアクセスできます。また、handleClick関数では、ボタンがクリックされた時にmyRef.current.focus()を呼び出すことで、input要素にフォーカスを当てることができます。

このようにして、関数コンポーネント内でrefを使用することができます。他のDOM要素やReactコンポーネントにも同様の方法でrefを使用することができます。

以上が、関数コンポーネントでrefを使用する方法と簡単なコード例です。この方法を使うことで、Reactアプリケーションでコンポーネント間の通信やDOM操作を行う際に便利に活用することができます。