コンポーネントとは

コンポーネントは、UIを構築するための再利用可能なビルディングブロックです。コンポーネントは、UIの一部を表し、独自の状態を管理し、必要に応じてレンダリングされます。Reactでは、コンポーネントを使用してUIを階層的に構築し、複雑なUIをより小さな部分に分割して管理することができます。

Reactのコンポーネントには、以下の2つの主要なタイプがあります：

1. クラスコンポーネント

クラスコンポーネントは、React.Componentクラスを継承して作成されます。
render() メソッド内でUIを定義し、this.state を使用して状態を管理します。
ライフサイクルメソッド（例：componentDidMount、componentDidUpdate）を使用して、コンポーネントのライフサイクルイベントに応答します。

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

2. 関数コンポーネント:

関数コンポーネントは、単純なJavaScript関数を使用して作成されます。React Hooksを使用することで、関数コンポーネントでも状態やライフサイクルの機能を利用できます。
関数コンポーネントは return 文で UI を返します。

import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}

コンポーネントは、ユーザーインターフェースのさまざまな部分を表すために使用されます。例えば、ヘッダー、フッター、ナビゲーションメニュー、ボタン、フォームなど、UI内のどんな機能的な部分もコンポーネントとして表現することができます。これにより、コードの再利用性が向上し、メンテナンスが容易になります。

【React】コンポーネントとは