Reactのコンポーネントのメリットは何か。

Reactを触っていると『コンポーネント』という言葉を頻繁に耳にします。
どのようなことか概念は分かっているのですが、以下に言語化して理解を深めたいと思います。

コンポーネントとは？

コンポーネントを直訳すると『構成要素』『部品』や『コンピュータ機器やソフトウェアの部品』『ステレオで、チューナー・アンプ・プレーヤー・スピーカーなどの単独の機器』のことを表しますが、Reactでは『UI の一部分となるビュー (View) を切り出したもの』を表しています。

そもそもUIって何のことか曖昧だったのでついでに調べてみました。
UI（ユーザーインターフェイス）はユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのことを意味するということ。
具体的にはGoogleのトップページは大変シンプルでユーザーに分かりやすいように設計されているので優れているとUI言えます。そもそも今、目に入っているwebページもUIです。

コンポーネント化するメリットは何か？

コンポーネント化をすることのメリットは何があるのか。
それはViewを切り出したものを使い回せることが一番大きいと思います。
コンポーネントごとにjs/jsxファイルを用意して、それを組み合わせてUIを構築・開発していきます。例えばボタンをコンポーネント化させることで、トップページで使ったボタンをユーザーページでも再利用することができます。つまり一つコンポーネントを作っておけば、そのコンポーネントを呼び出せば簡単に使い回すことができるということです。
（ちなみにHeaderやFooterなどもコンポーネント化させることができます！）

これによりコードの記述量が減ったり、メンテナンス性が向上したりします。
他にもメリットはありますが以上のことからViewを切り出したものを使い回せることが一番大きいと思います。

最後に

コンポーネントをもっと深く知りたい方はぜひ公式のドキュメントの三目並べを作ってもらうのが一番理解出来るかと思います！

参考記事・サイト