技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

Reactコンポーネントの違い

Reactコンポーネントの違い

Reactでも勿論コンポーネントを利用することは可能です。

コンポーネントを利用することで、再利用が楽になる、コードの見通しがよくなる、変更に強い設計にすることが可能になります。

Class Component

f:id:lhiroki1205:20210723171850p:plain

Functional Component

f:id:lhiroki1205:20210723171853p:plain こちらの方が主流のコンポーネントの書き方。 Functional Componentの方が記述量が少ない。

propsでデータを受け渡す方法

コンポーネントから子コンポーネントにデータを受け渡したい場合はpropsでデータ受け渡しが可能になります。

■ 親コンポーネント f:id:lhiroki1205:20210723172947p:plain

■ 子コンポーネント f:id:lhiroki1205:20210723172950p:plain

※ 受け渡せるデータは文字列、数値、真偽値、配列、オブジェクト、日付などなんでもOK

参考

#04 新・日本一わかりやすいReact入門【基礎編】コンポーネントとprops - YouTube