■こんなお悩みに
「React の学習を始めたけど、Componentの概念がよくわからない。」
「Componentで何ができるの？」
結論
- Componentとは使い回せる見た目(UI)のパーツ
Functional Componentを学ぶべし
フロントエンド開発において絶大な人気を誇るフレームワークであるReact。
その理解を進める上で絶対に理解をしておかないといけないのがComponentという概念です。
これからReactを学ぶ人や何となく使えるけど理解がハッキリとしない人に少しでもComponent理解のお力になれたらと思います。
Componentとは使い回せる見た目(UI)のパーツ
Componentを使うことによってReactで見た目部分(UI)を構築する際に効率よく開発を行うことができます。
例えば、新規作成・編集・削除の３つのページを作るとします。
そして、それぞれのページに「確定ボタン」を作りたい場合に、通常では同じコードをそれぞれのページで記述しないといけないですよね。
しかし、Componentとして「確定ボタン」をパーツ化することによって、「確定ボタンパーツ」を３つのページで使いまわせるようになるのです。
<button type=”button”>確定ボタン</button>
</a>
ぜひ概念を理解してスムーズな開発をしていきましょう。
Functional Componentだけで覚えればいい
React のComponentには「Functional Component」と「Class Component」の２種類があります。
結論「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を学ぶべし
基本的な理解する上で大切なのはこの２つです。
手を動かしながら覚えることも大切ですが、概念を理解するというのもとても大切なことです。
しっかりとベースを作って積み上げていきましょう。
最後まで読んでいただきありがとうございました。
本記事も読者さんのプログラミング学習のお力になれれば幸いです。
それではまた次回＾＾
コメント