📚

【React】ComponetとConponet間データの受け渡し

2021/06/03に公開約1,000字

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等あらゆるデータ型で渡すことができる。
  • 変数をそのまま渡すこともできる。
  • 文字列の時だけは{}なしで渡すことができる。

参考

https://www.youtube.com/watch?v=Q-df0QgZuhE

Discussion

ログインするとコメントできます