Reactの公式ドキュメントを読んでいて気になったので調べてみました。
JSXの中で一部属性名がケバブケースで記述される理由
公式ドキュメントに下記のように記載されています。
歴史的な理由から、aria-*属性data-*は HTML のようにダッシュを付けて記述されます。
調べてみて下記のようなことがわかりました。
- ケバブケースでの属性名記述はHTML規格であること
- 属性名はASCII文字のみを使用し、大文字と小文字を区別しないこと
- XMLベースの言語と互換性を持つため、ハイフン区切り（kebab-case）を使用していること
- Webページが異なるプラットフォームやデバイス間で一貫して表示されるようにするための規格であること
まとめ
歴史的背景というのはHTMLの規格のことなのか自信はありませんが、なんとなくそれっぽい答えに辿り着いたので調べたことを理由だと思っておくことにします。
違うよ！ってことであればぜひコメントください！