ReactのRefとRefForwardingを一気に学び直した

動機 業務でstyled-componentsを触る機会がありました。 styled-componentsは自分の周りではあまり良い噂を聞いていなかったため、少し調べたところこんな記事がHitしました。 記事の内容としては 様々な基礎概念を隠蔽しすぎている 使うことのメリットデメリットや、隠蔽されている部分の理解をしたチームでないと使わないほうが良い という内容です。 なので、しっかりと順を追って復習しました。 環境 viteで作成したReact18のTypeScriptプロジェクトで実施。 Reactの利用は関数型コンポーネントを前提としています。 Refを軽くおさらい 公式Docを見ていただくのが一番正確です。 公式では 一般的な React のデータフローでは、props が、親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを