この記事では、ReactにおいてDOMへのアクセスが必要な理由と、その際にRefがどう役立つのかを見ていきます。また、useRef、forwardRef、useImperativeHandleという3つのフックについて説明し、これらを適切に使用する方法を紹介したいと思います。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useRefを使用してReactでDOMにアクセスする 親から子にRefをpropとして渡す forwardRefを使用して親から子にRefを渡す useImperativeHandleを使用した命令型API useImperativeHandleを使用しない命令型API Reactには
![ReactにおけるRef:DOMへのアクセスから命令的APIまで | POSTD](https://cdn-ak-scissors.b.st-hatena.com/image/square/80d22bfa59ef916363a957a8820f551a9dc2a554/height=288;version=1;width=512/https%3A%2F%2Fwww.developerway.com%2Fassets%2Frefs-from-dom-to-api%2Fwelcome.png)