ReactのRefの使い方(初心者向け)

最近React Refを勉強したのですが、大体の初心者向けに書かれている記事に記載されている使い方がRefの使用用途としてはあまりしっくり来なかったので、自分用メモとして残しておきます。

React Refの使い道

RefはDOMを参照するために使うことが出来て、テキストフォーカスや、テキスト選択、アニメーションやサードパーティーDOMライブラリに使うことが出来ます。

ここではDOMに変更を入れる例を書いてみました。(テキストフォーカスする例は死ぬほどあるので...)

App.js

import { useRef } from "react";

export default function App() {
  const ref = useRef(null);
  return (
    <>
      <button
        onClick={() => {
          const li = document.createElement("li");
          li.innerText = "test";
          ref.current.appendChild(li);
        }}
      >
        Click
      </button>
      <ul ref={ref}></ul>
    </>
  );
}

ちなみに自作コンポーネントへrefを渡す際は、forwardRefを使わないとrefが使えないので、そちらを使った例についても書いてみました。

App.js

import { forwardRef, useRef } from "react";

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

export default function App() {
  const ref = useRef(null);
  return (
    <>
      <Input ref={ref} />
      <button
        onClick={() => {
          ref.current.value = "test";
        }}
      >
        Click
      </button>
    </>
  );
}