📚
【React】ComponetとConponet間データの受け渡し
Componentとは
Reactで作られるアプリ・ページの見た目と機能を持つ「UI」部品
Reactでは、複数のコンポーネントを組み合わせてページを作るのが一般的
記述方法
二種類書き方がある
クラスコンポーネント←現在は一般的ではない
- JavaScriptのクラスの書き方とほぼ同じ
- componentを継承する
- React 16.8で追加されたReactHooksが現れるまでは、ライフサイクル機能はclassで記述しないと実現できなかった
※関数コンポーネントでライフサイクル機能はuseEffectを使用することで実現する。
関数コンポーネント
- classコンポーネントと比較すると記述量が少なく、可読性が高い
- こちらで記述するのが一般的
コンポーネントを使用する理由
- 部品として再利用をすることができる
- コードの可読性が上がる
- 保守性が高い
記述ルール
- 1ファイル1コンポーネント
→この点は可読性の向上にも寄与している。 - ファイル名は大文字で記述する（アッパーキャメルケース、パスカルケース）
- 子コンポーネントでは、exportを記述して、外部からimportできるようにしておくる
- 親コンポーネントは子コンポーネントのimportをコードの上部に記述する
Componentの再利用
- 同じコンポーネントを何回でも呼び出すことができる
関数と同じ感覚で使用できる - 配列データをmap()メソッドを処理するのが一般的
※map()メソッド：配列の各要素に対して()内の処理を実行する
Component間のデータ受け渡し
propsを用いて親コンポーネントから子コンポーネントにデータを渡すことができる。
propsとは
- 親コンポーネントから子コンポーネントにデータを受け渡す概念
- 子コンポーネントの引数にpropsを記述すると、親コンポーネントから値を渡すことができる
propsで受け渡せるデータ
- propsのデータは親コンポーネントから子コンポーネントを呼び出す際にタグ内の{}に変数名と値を記述する。
- string,number, bool,array,object,date等あらゆるデータ型で渡すことができる。
- 変数をそのまま渡すこともできる。
- 文字列の時だけは{}なしで渡すことができる。
参考
Discussion