【React】コンポーネント

KS React

コンポーネントとは

Reactにおけるコンポーネントとは画面ページを構成するUI要素を再利用できる形で分割、部品化したものです。

 

コンポーネント化のメリット

なぜコンポーネントを使うのか？そのメリットは以下の通りです。
　

再利用する

アプリケーションは複数の画面で構成されることが多く、同じパーツが繰り返し使われることが頻発します。
例えばヘッダーやフッターなどは同じスタイルでほぼ全画面に繰り返し必要になると思います。
部品コンポーネントがあれば何度も同じ記述をせずに再利用ができるようになります。
　
 

可読性を上げる

基本的にコンポーネントは1ファイル1つになります。
1つのjsファイルにたくさんの記述があると非常に読みにくいコードになってしまいます。
部品を別々に分けることでコードも読みやすく、処理も追いやすくなります。
　
 

保守性を上がる

コンポーネント化しておくことで、複数にわたる画面のコンテンツ部分の修正の際大量のモジュールに手を入れる必要がなく
1つのファイルの修正で済むので保守性があがるといったメリットがあります。
　
 
 
 
こうした様々なメリットがあるのでReactを使用する際はコンポーネントに分けて記載していくことを心がけましょう。
また、コンポーネントにはクラスコンポーネントと関数コンポーネントがありますが、関数コンポーネントの方が新しく主流のため関数コンポーネントで書くことがおすすめです。
以前はクラスコンポーネントでしかできないことがありましたが、現在はReactHooksの登場で関数コンポーネントでも同じことができるようになりました。
　

 

コンポーネント例

関数コンポーネント（App.js)

returnは1行でも記載することができます。


　const App = () =>{
  return < h2 > Hello React </ h2 > ;
}

 
複数行にわたる場合は括弧で囲む必要があります。
コンポーネントの書き方は基本javascriptの関数の宣言と同じです。以下はアロー関数と呼ばれる書き方で記載しています。


　const App = () =>{
  return(
　　< div >
     < h2 > Hello React </ h2 >
    </ div >
  );
}
export default App;

 
コンポーネントを呼び出すには以下のように記載します。
コンポーネント名は常に大文字で始めてください。


   < App />

 
公式ドキュメントによると、React は小文字で始まるコンポーネントを DOM タグとして扱うようです。
例えば、< div /> は HTML の div タグを表しますが、< App />はコンポーネントを表しており、スコープ内に App が存在する必要があります。

 
実際にコードでAppのコンポーネントを呼び出すには以下のように記載します。（index.js)
呼び出し側でコンポーネントをimportしておく必要があります。


　import App from './App';
  const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
      </ App >
   );
  }

 
 
以下の通り画面にはApp.jsに記載された「Hello React」が表示されます。
HelloReact

参考

公式ドキュメント