【React初心者】Component(コンポーネント)ってなに?

【React】

 

■こんなお悩みに

「React の学習を始めたけど、Componentの概念がよくわからない。」
Componentで何ができるの?」

結論

  • Componentとは使い回せる見た目(UI)のパーツ
  • Functional Componentを学ぶべし

フロントエンド開発において絶大な人気を誇るフレームワークであるReact。
その理解を進める上で絶対に理解をしておかないといけないのがComponentという概念です。
これからReactを学ぶ人や何となく使えるけど理解がハッキリとしない人に少しでもComponent理解のお力になれたらと思います。

Componentとは使い回せる見た目(UI)のパーツ

 

Componentを使うことによってReactで見た目部分(UI)を構築する際に効率よく開発を行うことができます。

例えば、新規作成・編集・削除の3つのページを作るとします。
そして、それぞれのページに「確定ボタン」を作りたい場合に、通常では同じコードをそれぞれのページで記述しないといけないですよね。

しかし、Componentとして「確定ボタン」をパーツ化することによって、「確定ボタンパーツ」を3つのページで使いまわせるようになるのです。

<a href=”#”>
<button type=”button”>確定ボタン</button>
</a>
⇩⇩⇩
<Button />
上記のように、一度パーツ化をしてしまえば3行文の記述を1行文の記述で使い回せてしまうんです。
確定ボタンを例にあげましたが、headerやfooterなど使い回せるとコードの記述量がかなり減りますよね!!
ぜひ概念を理解してスムーズな開発をしていきましょう。

Functional Componentだけで覚えればいい

React のComponentには「Functional Component」と「Class Component」の2種類があります。
結論「Functional Component」をマスターすれば十分です。

というのも、Hooksの登場で「Class Componentにしかなかった機能(state, lifecycle)」が「Functional Component」でも使えるようになったからです。

今では、「Functional Component」props, state, lifecycleをもたせてComponentを構築するのが主流にないっているのです。

そのため「Class Component」に学習コストを割くくらいなら、propsやstateなど、学べることはまだまだあるのでどんどん次に進みましょう。

まとめ〜Component〜

「Componentとは」というテーマでしたがいかがだったでしょうか。

  • Componentとは使い回せる見た目(UI)のパーツ
  • Functional Componentを学ぶべし

基本的な理解する上で大切なのはこの2つです。
手を動かしながら覚えることも大切ですが、概念を理解するというのもとても大切なことです。
しっかりとベースを作って積み上げていきましょう。

最後まで読んでいただきありがとうございました。
本記事も読者さんのプログラミング学習のお力になれれば幸いです。

それではまた次回^^

コメント

タイトルとURLをコピーしました