React

【React Hooks】useRefとは?概念や使い方を徹底解説!

こんにちは、アプリ開発者のテルです!

「useRefの使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. useRefの使い方をサンプルで理解できる
  2. コードを公開しているので、自分の環境で確かめることができる

【React Hooks】useRefの使い方

useRefとは

  1. 指定した要素への参照を行うことが出来るもの
  2. refの値を変更しても再レンダリングはされない

useRefを理解する上で、押さえておくべきポイントは上記の2点のみです。

では、実際の使用例を見ていきましょう!

使用例

上記は、TextFieldに値を入力し、ボタンを押すと下に値が表示されるというものです。

useRefを用いることで「inputタグ」の中身を参照しています。

以下のように、入力された値は「current > value」に入っています。

(Chromeの開発者ツールで要素の中身を見れます。)

useRefで、こちらを取得していきます。

取得した値は、useStateで値を状態を保持し、最終的に表示しています。

以上が、useRefの基本的な使い方です。

まとめ

今回は「useRefの使い方」を解説しました。

React Hooksの機能の1つであるuseRefを使うことで、指定した要素への参照を行うことができます。

良ければ上記のコードを参考に、色々と試してみてください。

最後までご覧いただきありがとうございました。ではまた!

エンジニア就活対策