react-hook-formを触ってみた

プロジェクトにReactHookForm（RHF）があるので使ってみた。 今まで、RHFは結構難しいと思って触ってなかったけどちゃんとみたらそこまでめっちゃ難しいって感じでもなさそう。

やりたいことはFormのhook

結局のところやろうとしてることはFormをカスタムフックとして使いやすくしたって感じだと思う。

ざっくりこんな雰囲気。

• どのform要素の項目なのか？ → register or control
• 今の項目の値は？ → watch, useWatch
• 値を変える → setValue
• 値の初期化 or 更新？ → reset
• error → fieldState
• 送信 → handleSubmit

これだけ覚えていたら使えそう（知らんけど）

validation関係は、resolverとして定義したら使えて最近だとzodとかが流行ってるっぽいのでまた使ってみたい。

FormはAtomic Designだとmoleculesに置く？

なんかAtomic Designでこのコンポーネントどこに置くのか？ みたいなの毎回悩む。

Formとかはorganismに入れるのかなって思うけど、Formの要素に関してはmolecules以下に置くのかな？

汎用性が高いコンポーネントってことで、RHF使ってたりするとpropsにRegister関数渡したりするけど、これを渡すのは汎用性が低くなるってわけじゃないのかしら？

まだまだ分からないことが多すぎるぜ。 ドキュメントみたりしながら試行錯誤してみる。