なんだこのエラー
どこの部分がエラーになっているんじゃ！！！
Hydraction Error って？
Expected server HTML to contain a matching <div> in <div>.
とかのエラーのこと。
なんで出るの？というところなのですが...
サーバー側とクライアント側のレンダリングに差異が出るとこのエラーが出ます。
クライアント側で、ある状況によってレンダリングが変わる場合 または HTML の規則を守っていなく、クライアント側で変更された場合などに起きるらしい。
エラーの読み方
何が困るかというとこのエラーではどの部分でエラーが出ているかが分かりづらい所です。
Component Stack を手がかりにどの場所でエラーが起きているかを探します。
基本的に上に行くほど深い層の順で並んでいます。
自分で書いたコードと照らし合わせながら Component Stack を上に見ていき、エラーの発生箇所を特定しましょう
分かりづらかったら
エラーの発生している箇所と自分の追っているコードの位置があっているか不安な場合、それを囲むように <aside> タグなど使っていないタグを置いてみましょう
Component Stack に aside タグが表示されたら位置がわかりますね。
まとめ
慣れてきた頃に出てくるこのエラーに何時間か食われました(n 敗)
このエラーについて詳しく書いている記事も少ないので苦労しました....
React と付き合っていくには必要な工程なのかもしれませんね。二度とやりたくないけど。
