【初心者用】Reactコンポーネントとpropsについて
Reactで開発をするようになり頻繁にコンポーネントとprops使用することが多いので、改めてなんとなくで使用していたものを詳細に理解しようと思いまとめました。
Reactではコンポーネントとpropsは必須なので、後々に振り返りができるようなまとめにしたいと思います。
1. そもそもコンポーネント・propsって何？
・コンポーネントとは
ReactのコンポーネントはUIの一部分となる機能（View)を切り取ったものです。
コンポーネントを使用することにより、UIを独立した再利用可能な部品に分割し、部品それぞれを分離して考えて使用することができます。
コンポーネントは概念的にはJavaScriptの関数と似たものという認識で大丈夫です。
・propsとは
Reactのpropsは親コンポーネントから子コンポーネントに値を受け渡しをするために使用します。
Reactのコンポーネントは２種類ありpropsとStateの２種類があり、propsは値を代入後に更新可能でpropsは代入後に更新不可という違いがあります。
2. コンポーネントとpropsの使い方について
・コンポーネントとpropsの使い方について
Reactにおけるコンポーネントとpropsの使い方について以下に例えを記述します。前提
■親コンポーネント
→呼び出す子コンポーネントに必要な値を記述
■子コンポーネント
→親コンポーネントで記述された値を、受け取りたい所にpropsを定義する。
・親コンポーネント
import 子コンポーネント from './components/子コンポーネントフォルダ/子コンポーネント';
function App() {
return (
<>
);
}■文字列
・親コンポーネント
import 子コンポーネント from './components/子コンポーネントフォルダ/子コンポーネント';
function App() {
return (
<>
3. コンポーネントとpropsのメリット
Reactのコンポーネントを使用することにより以下のようなメリットがあります。
3-1. メリット①作成したUIのデザイン・機能をまとめて１個として扱える
HTML（DOM）・JavaScriptの処理・CSSのデータを各コンポーネント毎で機能をまとめているので、作成した各UI毎でかんりできるので管理や更新・修正がしやすくなっています。
この３つをまとめてパーツ化して管理できるというところが、今までのHTMLだけ切り分ける方式と異なる点です。
3-2. メリット②カプセル化されている
コンポーネントを使用していれば、各コンポーネント毎で機能や処理を分けて管理しているので、そのコンポーネントの機能さえ理解していれば内部の実装を気にしないで使用することができます。
3-3. メリット③コンポーネントは再利用可能
こちらがコンポーネントを使用するにあたり最大のメリットとなっています。
１つの共通のパーツを作成した場合に、コンポーネントを１度作成さえしてしまえば何度でも同じ機能を使いまわすことが可能になっています。
ヘッダーやサイドバーなど何度も使用するものは、一度作成して使いまわすことができれば作成時間を大幅に短縮することができます。
3-4. メリット④パーツの一元管理をすることによりメンテナンスが容易
コンポーネントでは基本的には１つの機能を作成した場合は、同様の機能を追加する場合はすでに作成されている機能を使いまわして作成します。
同じ機能を使いまわすのでデザインや機能の修正・更新がある場合は、１つの機能を更新・修正することによりすべてに設定が反映されます。
ですので、コンポーネントで一元管理することによりメンテナンスや機能更新などの際に人為的なミスが起こらないような開発を行うことができます。
3-5. メリット⑤コンポーネントを組み合わせ、別のコンポーネントを作成できる
各コンポーネントは各機能ごとの処理しかできないですが、適切にコンポーネントを振り分け利用するコンポーネントを作成することができれば、様々な問題を解決できるコンポーネントを作成することができます。
このような開発ができるのはコンポーネントが再利用性が高いため可能となっています。
4. まとめ
上記を含め今ぽーめんととは
①作成したUIのデザイン・機能をまとめて１個として扱える
②カプセル化されている
③コンポーネントは再利用可能
④パーツの一元管理をすることによりメンテナンスが容易
⑤コンポーネントを組み合わせ、別のコンポーネントを作成できる
の５つの特徴があるといえます。
コンポーネント管理は開発で使用できればかなり楽になる要素なので、使用できるなら使用して開発を進めるとよいと思います。