前回までの記事

React Hooksを学ぶ【useState編】

ReactHooksを学ぶ【useReducer編】

useRefって何？

ざっくり以下2つのポイントを持ったHooksである。

1. DOMを操作することが出来る
2. 値が更新されたときに再レンダリングがされない

それぞれについて色々試してみる。

DOMを操作することが出来る

使い方

基本的にはDOM要素に定義したuseRef変数を指定する。

import { useRef } from "react";

const Ref1 = () => {
  const testRef = useRef<HTMLInputElement>(null);
  return (
    <>
      <input
        type="text"
        className="test"
        ref={testRef}
        style={{ border: "black 1px solid" }}
      />
    </>
  );
};

export default Ref1;

「ref={testRef}」がref属性を指定するところ。

typescriptだと、useRefを指定するときに「useRef<HTMLInputElement>(null);」と書かないとアラートが発生する。

nullが入るかどうかわからないのですが・・・っていうアラート。

currentに値が設定される

すごく単純な例。useRefを使って値も参照することが出来る。