プログラミング初心者のための入門ブログエンジニアが未来を切り開く。基礎この広告は、90日以上更新していないブログに表示しています。本日はReactの『useRef』の使用方法について解説致します。注意点とし、この記事では、Reactの基本である『useState』および『useEffect』フックを使用しますのでご了承下さい。useRefフックとはuseRefフックを使用する最後にuseRefフックとは『useRef』フックを使用すると、更新時に再レンダリングがされる事なく、可変値を格納するために使用できDOMノード要素にアクセスするために使用できます。『useRef』は再レンダリングを引き起こす事はないという事は、アプリケーションがuseStateフックを使用した場合にレンダリング時の回数を数えようとすると、フックが再レンダリングを繰り返し引き起こすため、無限ループに陥ります。それを回避するために、useRef()フックを使用し活用します。再レンダリング間で可変値を永続化させる事になります。useRefフックを使用するまずは、簡単な実装で流れを見てみましょう。下記では、入力フィールドのデータを保存し、レンダリング間でそれらを永続化できるようにしています。CodePen.最初のステップは、フックを初期化することです。useRefフックを初期化するには、インポートして呼び出して変数に格納してあげます。引数としてフックに値を渡すこともできます、Reactはこの値をフックの初期値として使用します。useRef(null);まず初期値として渡した値が『null』となっていますが、useRefを使用してDOMノードまたはReactコンポーネントへの参照を格納する場合、開発者は通常では、初期値をnullに設定します。フックを初期化すると、オブジェクトが返されます。そのオブジェクトには、currentというプロパティが含まれます。フックに使用した初期値がこのcurrentプロパティの値になります。このフックを使用して、DOMノードまたはReact要素への参照を保存します、それを行うには、ノードまたは要素を見つけ、ref属性を追加します。/>この属性の値は、初期化されたuseRef()フックになりますので、属性には変数名を渡してあげます。する事により、refオブジェクトによって返されるcurrentプロパティの値が要素となります。refでこのcurrentプロパティを使用して要素にアクセスできるようになります。値の保存では、useRefがノードや要素への参照を保存できるのと同じように、値も保存可能です。これは、再レンダリングをトリガーせずに値を保存する場合に便利で最適となります。useRefを使用して値を保存および更新する場合は、これらの更新は副作用であることに注意してください。useEffect()フックを使用すると、値が変更される前に状態の値を参照に保存できます。useEffect()フックを使用した場合で、別の例を見てみましょう。ここからは、useStateフックおよびuseEffectフックも使用していきます。それらフックのチュートリアルはuseStateフックとuseEffectフックで学ぶ事ができます。それでは、全体コードを確認下さい。』と呼ばれるオブジェクトを返します。』に渡される引数が値であるプロパティとなります。初期値を設定します『useRef(0)』。』という定数に格納しておきます。』入力フィールドにテキストを入力することによって更新されていきます。』にその割り当てられた値を持ちコンポーネントを再レンダリングせずに、値を出力するためであり値は変更されますが、コンポーネントには反映されません。これは、コンポーネントを再レンダリングせずにDOM要素のコンポーネントまたはプロパティの値を変更できるため便利な機能となります。覚えておくべき1つは、手動で値を更新する場合では、ボタンをクリックすると値が更新されます。値を変更しても再レンダリングは発生する事はありません。そのため、コンポーネントが再レンダリングされUIが最新の値で更新されるまで、同じ値が表示され続けます。最後に『useRef』ではこのように、簡単にDOM要素を永続的に操作することが可能となります。それだけなく、Reactコンポーネントを非常に簡単に操作もできます。以前の状態値から状態値を変更する場合は、useRefフックを使用しそれらを永続化することをお勧め致します。小道具(props)を使用してデータを渡すことで作成することをお勧めします。useRefフックは関数コンポーネントでのみ使用可能であることに注意してください『current』の引数が渡されなかった場合に返されるオブジェクトには『undefined』となります。DOM要素を参照する場合の時は『React.createRefAPI』を使用して下さい。本日は以上となります。この記事で、useRefフックとは何か?また、その使用方法を理解するのに役立つことを願っております。最後までお読み頂きありがとうございます。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。