useRefとDOM操作

なぜ学ぶか： 「ボタンを押したら入力欄にカーソルを当てたい」— stateでは表現できないこの操作に使うのがuseRefです。まず例を見てください。

まずはこの例を見てみましょう

function FocusForm() {
  const inputRef = useRef<HTMLInputElement>(null); // 入力欄への「参照」の箱

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        入力欄へカーソルを移す
      </button>
    </div>
  );
}

ref={inputRef}で入力欄と箱を結びつけ、inputRef.currentで実物の入力欄を直接操作しています。